The Axios Get request returns data that contains the text "data: ↵↵↵↵"

Struggling to work with the response of a get request made using Axios to a Jobs API site. When I log the response, it appears as {data: "↵ ↵ ↵ ↵"}, resembling JSON but not quite usable in that format.

const url = //api string content

axios.get(url)
.then(function(res){
    console.log(res);
})
.catch(function(){
    console.log("err");
})

When attempting to access res.data directly or by parsing it as JSON, it seems to be returning an unexpected function structure instead of plain data. The format resembles something like displayJobs({"keys": "values"}). Oddly, when viewing the JSON directly at the link, it displays normally. How can I properly parse the returned data into a JSON format for easy manipulation? For example, accessing jobTitle like res.data.jobTitle

Any guidance would be greatly appreciated. While I have successfully worked with APIs in other projects, I am still learning and hope this question isn't too basic.

Answer №1

It appears that the API endpoint you are working with utilizes JSONP. Unfortunately, axios is not compatible with JSONP endpoints. I would suggest either:

  1. Finding an alternative API endpoint that does not require JSONP, or
  2. Considering using the jsonp package specifically designed for JSONP endpoints. More information can be found at: https://github.com/axios/axios/blob/master/COOKBOOK.md#jsonp

For further insights on JSONP, you can refer to this resource:


If you're curious about how I arrived at this answer and my research process in general, I recognized the data pattern from JSONP responses. This led me to search for information on "axios jsonp" which directed me to a GitHub thread confirming that axios does not support jsonp. Following the links provided in the discussion, I composed my response.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adjusting the Pace of a CSS Marquee

My CSS marquee effect is working perfectly, but I am having trouble with the speed. The issue arises when the text length varies - shorter text takes longer to scroll while longer text scrolls quickly. This inconsistency is due to the animation duration an ...

A step-by-step guide on updating your Json file

Hello everyone, I appreciate your help and attention. I have an Application that reads data from a .json file, all stored on a remote server. My goal is to update the .json file whenever a new file is added to the folder. Is this achievable, and if so, ho ...

Setting the content-type for static assets in NuxtJS

I'm trying to use the Nuxt built-in server to serve the static file /.well-known/apple-app-site-association with a content-type of application/json. Unfortunately, because the file does not have a .json extension, it is returning as application/octet- ...

org.openqa.selenium.WebDriverException: Error occurred: Runtime.evaluate encountered an issue: SyntaxError: Token is invalid or unexpected

I'm encountering an issue while trying to execute the following code using Selenium webdriver The code snippet is: WebElement w=driver.findElement(By.xpath("//*[@class='tab']")); JavascriptExecutor js=(JavascriptExecutor) driver; ...

Scope of MongoDB's `.findOne` method

Having trouble with variable scope. var max; ClassModel.findOne({ class: '1a' }, function (err, class1a) { if (err) return handleError(err); max = class1a.members; console.log(max); }); console.log(max); Why does ...

How can I utilize the pick parameter in nuxtjs3 useFetch for selecting arrays or performing a deep pick?

Currently working on my nuxtjs3 project, where I am extracting data from an API. Specifically using jsonPlaceholder for this task. Extracting data from a single object is not a problem: const { data: useFetchOnly } = await useFetch('https://jsonplace ...

Having trouble simulating getSignedUrl from npm package "@aws-sdk/cloudfront-signer" with jest

I attempted to simulate the npm module "@aws-sdk/cloudfront-signer"'s function getSignedUrl using jest. Below is the code snippet: import { getSignedUrl } from '@aws-sdk/cloudfront-signer' let url = 'test value', // confidential k ...

Utilizing RabbitMQ's amqp.node integration within a Node.js Express application

The RabbitMQ Javascript tutorials feature the use of the amqp.node client library amqp.connect('amqp://localhost', function(err, conn) { conn.createChannel(function(err, ch) { var q = 'hello'; ch.assertQueue(q, {durable: fal ...

Using .map() method in React without Axios and Express, leading to undefined results

Having trouble with a form submission error in React Uncaught TypeError: queryList.map is not a function The problematic code snippet: const [query, setQuery] = useState(); const [queryList, setQueryList] = useState([]); const [response, setRespon ...

Enhancing your scene with new objects using three.js

Exploring the possibilities with three.js, I am working with two shapes: "squares" and a "sphere". Each shape has an associated button. When the user clicks a button, the corresponding shape is added to the scene. However, there can only be one square and ...

Picture that perfectly matches the height of the window

I am looking to create a website design similar to this where an image fills the window until you scroll down. I am not sure how to accomplish this. Would using jQuery be the best option? I haven't been able to find much information on this. While my ...

Clear existing markers from the map before inserting new markers

I have a map where initially the markers load coming from the database, Then there is a time-based Ajax request that fetches new records every minute. In my code snippet, I am using setMapOnAll(null) following the guidance from the Google Maps Documentati ...

Sending SQL data to a Node.js module upon receiving a client request

Currently, I am establishing a connection to a SQL database and retrieving data on the view by using res.json. The client initiates a request - my server employs an MSSQL driver and a connection string to establish a connection with the database and fetch ...

The malfunctioning image in Safari browser

When using ASP.net image tags in my code, such as the example below: <asp:Image ID="Image6" runat="server" ImageUrl='<%#Eval("DeviceStatusFlag")%>' alt=''/> In some browsers like Firefox, if the ImageURL is empty, a broken ...

Issue with importing a library into a Next.js component

I seem to be facing an unusual issue with my Nav component. Although I am able to import various items in my other components without any problems, for some reason, I cannot import anything into my Nav component. import { useState, useEffect } from "r ...

Prevent the div from moving beyond the boundaries of its container while anim

After experimenting with a javascript image panner that I put together from various code snippets, I have decided to switch to a simpler approach. However, I need some guidance on a few things. Below is the code for the left and right buttons: <div id ...

"Troubles encountered while calling a restful API through AngularJS with a post request resulted in a

My task involves calling a restful API with basic authentication (I believe the authentication is functioning correctly). The API requires a special custom header: "X-AppGlu-Environment: staging". However, I am unsure how to add this header. Additionally, ...

What is the best way to align text and an arrow on the same line, with the text centered and the arrow positioned on the

.down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } .arrow { border: solid black; border-width: 0 3px 3px 0; display: inline-block; padding: 30px; } <p>Down arrow: <i class="arrow down"></i></p> Looking to ...

When the div element reaches the top of the page, it sticks to the top and is only displayed when the user

In the center of a full-screen hero section, there is a form. When it reaches the top, its position becomes fixed and additional classes are added through a script - such as shrinking its height and adding a background. What I aim to achieve is for the fo ...

What prevents me from displaying the image in the Bootstrap tooltip?

I am currently utilizing the Bootstrap framework v3.3.0 for my website. I'm trying to implement an image as a tool-tip when the user hovers their mouse pointer over an icon. Here is the HTML code I have: <div class="col-sm-5"> <div class= ...