Axios - How to read JSON response? - javascript

Axios 0.17.1
.then(function (response) {
console.log(response);
//console.log(response.status);
//It is an error -> SyntaxError: Unexpected token u in JSON at position 0
console.log(JSON.parse(response.data.error));
console.log(response.data.error); //undefined.
The console.log of response is
{data: "{"error":"Name must be entered with more than one … NULL↵
["isPipe":protected]=>↵ NULL↵ }↵}↵", status: 203, statusText:
"Non-Authoritative Information", headers: {…}, config: {…}, …} config
: {adapter: ƒ, transformRequest: {…}, transformResponse: {…}, timeout:
0, xsrfCookieName: "XSRF-TOKEN", …} data : "{"error":"Name must be
entered with more than one character."}object(Slim\Http\Response)#32
(5) {↵ ["status":protected]=>↵ int(200)↵
["reasonPhrase":protected]=>↵ string(0) ""↵
["protocolVersion":protected]=>↵ string(3) "1.1"↵
["headers":protected]=>↵ object(Slim\Http\Headers)#33 (1) {↵
["data":protected]=>↵ array(1) {↵ ["content-type"]=>↵
array(2) {↵ ["value"]=>↵ array(1) {↵ [0]=>↵
string(24) "text/html; charset=UTF-8"↵ }↵
["originalKey"]=>↵ string(12) "Content-Type"↵ }↵ }↵ }↵
["body":protected]=>↵ object(Slim\Http\Body)#31 (7) {↵
["stream":protected]=>↵ resource(59) of type (stream)↵
["meta":protected]=>↵ NULL↵ ["readable":protected]=>↵ NULL↵
["writable":protected]=>↵ NULL↵ ["seekable":protected]=>↵
NULL↵ ["size":protected]=>↵ NULL↵ ["isPipe":protected]=>↵
NULL↵ }↵}↵" headers : {content-type:
"application/json;charset=utf-8"} request : XMLHttpRequest
{onreadystatechange: ƒ, readyState: 4, timeout: 0, withCredentials:
false, upload: XMLHttpRequestUpload, …} status : 203 statusText :
"Non-Authoritative Information"
proto : Object
JSON.parse(response.data) as well as response.data.error -> Both are giving error. How can i read the data?
Slimframework 3.
$data = array('error' => 'Name must be entered with more than one character.');
$newResponse = $response->withJson($data, 203);
return $newResponse;

In Axios responses are already served as javascript object, no need to parse, simply get response and access data.

Assuming the response from the server looks like this:
{"token": "1234567890"}
Then in Axios you can access it like this:
console.log( response.data.token )

As already written, Axios already returns JSON by default. Just use response.data as simple JS object.
However, following insight might help others: I had an issue that Axios returned the response as a string. When investigated I discovered that the server returned an invalid JSON (it was a static file server). When fixed the JSON format, Axios used JSON instead of string again.

you can simply get it as following,
ex:
{
"terms": {
"title": "usage",
"message": "this is the usage message"
}
}
when the response look like this,you can get it using "response.data",and so on....
.then(response =>
console.log( response.data.terms.message)
Cheers !

I had a similar format response as the one in console log and my issue was that my .json file wasn't properly formatted. I was missing a comma. Post your json file to have a look.

axios by defualt convert response to JSON, you must use response.data instead of response
export const addPosts = () => async (dispatch) => {
await axios('https://jsonplaceholder.typicode.com/todos/1')
.then(response => dispatch({type: postActionTypes.POSTS, payload: response.data}))}

For some reason, in my case the JSON was properly formatted but was returned as string anyway. With this workaround I solved the issue.
// ...
return await this.axios_instance.request<T>({
method,
url,
headers,
params,
transformResponse: (data) => JSON.parse(data), // <----------
data,
});
Simply put, I explicitly told to transform the response using JSON.parse. For some reason this worked, while other answers didn't.
This worked for me!! Hope it helps.

Here is sample code,
try {
const res = await axios.get("/end-point");
console.log("JSON data from API ==>", res.data);
} catch (error) {
// handle error
}

I had a similar problem. As others have pointed out, axios reads the json as a js object and you can easily move through the hierarchy to get your field data.
However, for me axios did not want to read the json as an object and instead returned a string. The cause was that there was a hanging comma at the end of the json due to a previous row deletion in the file. So the file content wasn't valid json, and axios simply returned a string.
Remove the comma, everything worked.
I would suggest to check the json for any incorrect syntax.

I had the same problem and I found that I was not reading data properly. Finally, I got a solution. try this.
my data was like:
response = [{"myname","Anup","age":23,"Education":"Graduation"}]
I was trying to retrieve data like(this was giving output undefined)
axios('https://apiurl.com')
.then((reponse)=>{
const recieved_Data=fetchdata.data;
console.log(recieved_Data.name);
})
Correct Approach:
axios('https://apiurl.com')
.then((reponse)=>{
const recieved_Data=fetchdata.data;
console.log(recieved_Data[0].name);
})
as you can see i have passed the index value of the array of my response recieved_Data[0].name And this gave me the correct output.
Vote me if this works for you.
Thanks!

So I came across this post in search of an answer to my question. "How to access data in a json file returned by an api." Nonetheless, what worked for me at the end of the day was an answer to a similar question on stackoverflow to which the link is Axios. How to get error response even when api return 404 error, in try catch finally.
However, here is the code I used to access my error codes returned by my backend api.
axios.get(/sanctum/csrf-cookie).then(response => {
axios.post(api/register, registerInfo)
.then(response => {
console.log('This is the response: ' + response.data.errors);
}).catch(error => {
console.log('This is the error: ' +
error.response.data.errors.name);
});
});

Related

Angular POST request to api sending [object, Object]

I am trying to make a functionality to my app that takes the products from an order and sends them to cart.. so basicaly it repeats the whole order.
I get the order successfully but am having trouble sending it back to the API with POST method.
My API call in cart.service.ts file is:
repeatOrder(products: SingleOrder['izdelki']) {
return from(Preferences.get({key: 'TOKEN_KEY'})).pipe(
switchMap(token => {
const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
const formData: any = new FormData();
formData.append('products', products);
return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`, formData, {headers, observe: 'response'});
}),
catchError(err => {
console.log(err.status);
if (err.status === 400) {
console.log('Error 400: ', err.error.message);
}
if (err.status === 401) {
this.authService.logout();
this.router.navigateByUrl('/login', {replaceUrl: true});
}
return EMPTY;
}),
);
};
and this is the repeat purchase function in order-view.page.ts file:
repeatThisPurchase() {
this.repeatOrderArr= [...this.orderProducts];
this.cartService.repeatOrder(this.repeatOrderArr).subscribe(
data => {
console.log('Data sent to cart: ', data);
},
error => {
console.log('Error', error);
}
);
}
and this is the button I use to trigger this repeatPurchase function:
<div class="btn-wrapper">
<ion-button color="vigros" class="purchase-btn" size="default" type="submit" (click)="repeatThisPurchase()" expand="block">Ponovi nakup</ion-button>
</div>
I am getting error 500 in my console in browser and the payload in Networks tab is:
products: [object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
What am I doing wrong?
try not using formdata (formdata is mostly used to send files)
const headers = new HttpHeaders().set('Authorization', `Bearer ${token.value}`);
return this.httpClient.post(`${environment.apiUrl}cart/repeatorder`,{ products }, { headers });
Do you know what your api is expecting as request body?
Consult the documentation for append:
value
The field's value. This can be a string or Blob (including subclasses such as File). If none of these are specified the value is converted to a string.
You have:
const formData: any = new FormData();
formData.append('products', products);
Based on the output, products is an array of objects (since a comma seperated list of [object Object] is what you get when you convert such a thing to a string).
You need to encode the data somehow. The specifics will depend on how your server side code is trying to process it but one possible approach would be to encode each object as JSON and append them one by one, using a [] on the end of the name to mark it as an array for PHP and some Node.js libraries:
products.forEach(product => {
formData.append('products[]', JSON.stringify(product));
});
Again, I must emphasise that the specifics depend on your server-side code. It might be better to simply encode products as JSON and send an application/json formatted request instead of using FormData to send a multipart/form-data request.

Failed to load resource: the server responded with a status of 401 : React Website

( https://ikgithub-finder.vercel.app/ )
this is a website im building to search github users following a react course.
im having a problem with the website not catching the response or some axios problem here.
im searching for github user and this is the response, which I didn't had in the building stage.
This is the code repo:
(https://github.com/IdanKfir/github-finder)
and this is what console.log gets from searching a user:
xhr.js:247 GET https://api.github.com/search/users?q=brad 401 asyncToGenerator.js:6 Uncaught (in promise) Ft {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …} code : "ERR_BAD_REQUEST" config : {transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …} message : "Request failed with status code 401" name : "AxiosError" request : XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} response : {data: {…}, status: 401, statusText: '', headers: n, config: {…}, …} stack : "AxiosError: Request failed with status code 401\n at https://ikgithub-finder.vercel.app/static/js/main.e1a418f5.js:2:193546\n at XMLHttpRequest.d (https://ikgithub-finder.vercel.app/static/js/main.e1a418f5.js:2:193694)" [[Prototype]] : Error
I was trying to change the token I used from git, and the env file was uploaded so I had to delete.
to be honest I thought that was the problem so I reuploaded and again the same error.
Would love sending the whole codes instead of repo but it really lots of code, lucky me if you'll have the time to look for it anyways, thanks :)
I debug your code and find that inside your context/github.js your have a function of searchUser i.e :
export const searchUsers = async (text) => {
const params = new URLSearchParams({
q: text,
});
const response = await github.get(`/search/users?${params}`);
return response.data.items;
};
Here your are direactly getting the value of inside your text parameter so you don't need to user URLSearchParams just direactly pass it to your api call
export const searchUsers = async (text) => {
const response = await github.get(`/search/users?${text}`);
return response.data.items;
};
and if you want to use URLSearchParams you have to pass full url to the function that i see currently you are not doing .
Let me know if this works for you otherwise we will find another way :)
So, soon enough I found an answer to my question :D
To other people who have this problem maybe the solution will be the same;
So it was the token, but the problem was this:
Send Authorization in string
replace
{ headers: { Authorization: Bearer ${userInfo.token} } }
with { headers: { "Authorization": Bearer ${userInfo.token} } }

Postman pre-request script: Can't access header from response

I am writing the following pre-request Script to get my JWT for authentication:
pm.sendRequest(echoPostRequest, function (err, res) {
console.log(err, res, typeof res);
if(err === null){
console.log(res.header)
// var authHeader = res.header.find(v => {v.key === 'Authorization'})
}
});
This is what the console output currently looks like:
null, {id: "4ba2b741-316e-454d-b896-eab3aef74ae2", status: "OK", code: 200…}, object
undefined
OK
// If you enlarge the opbject it looks like the following:
id: "4ba2b741-316e-454d-b896-eab3aef74ae2"
status: "OK"
code: 200
header: [10] <--- There are my headers ?!
stream: {…}
cookie: [0]
responseTime: 121
responseSize: 0
The problem is I can not access the header array the script always tells me it is undefined, same if I try the access the cookie array. But I can access every other single property, maybe it's because header and cookie are arrays? I don't know. Any ideas what I am doing wrong and how I can get my Authorization header?
I think the Problem must be a bug, my workaround is to stringify and parse the object as json, than the headers are accessible.
r = JSON.parse(JSON.stringify(res))

MongoDB Atlas Trigger -- Receiving a "StitchError: HTTP request failed: unexpected status code: expected=200, actual=415" error

We're trying to create a trigger in MongoDB Atlas that will automatically reduce our Azure tier of an evening to save cost. The function we've put together (probably incorrectly!) returns an error when we try to run it. The result output is:
logs:
uncaught promise rejection: StitchError: HTTP request failed: unexpected status code: expected=200, actual=415
> result:
{
"$undefined": true
}
> result (JavaScript):
EJSON.parse('{"$undefined":true}')
We've tried messing around with the headers and body, but the end result is always the same.
Here's the WIP function:
exports = function() {
const response = context.http.patch({
scheme: "https",
host: "cloud.mongodb.com",
path: "/api/atlas/v1.0/groups/abc123/clusters/fake-server",
username: "usernamehere",
password: "passwordhere",
digestAuth: true,
headers: {"Content-Type": [ "application/json" ]},
body: {"clusterType":"REPLICASET", "providerSettings":{"providerName":"AZURE", "instanceSizeName":"M10", "regionName":"regionhere" } },
encodeBodyAsJSON: true
});
};
Any help would be greatly appreciated.
It turns out that we had it right the whole time.
Executing the exact same code as above is now correctly reducing our tier. I don't know what was causing the MongoDB Atlas API to think that our headers and / or request body were incorrect, but it's perfectly happy with it today.
The only other thing I will point out is that if you want this part of the error to go away...
> result:
{
"$undefined": true
}
> result (JavaScript):
EJSON.parse('{"$undefined":true}')
...you need to change the function to async / await like so:
exports = async function() {
const response = await context.http.patch({

JS Fetch api and Symfony2 FOSRestBundle

Currently I am trying to get a response from my Symfony2 FOSRest Controller using Javascript Fetch API. In my controller I am serving a response with the following code:
return View::create()
->setStatusCode(200)
->setData(array('success'=>true));
And in my JS I am getting it with this:
fetch(url, 'get').then(
function (response) {
if (response.status !== 200) {
console.log('Problem, status: ' + response.status);
return;
}
response.json().then(function (data) {
console.log('OK');
if (typeof callback == 'function')
return callback(data);
});
}
).catch(function (err) {
Console.log(err);
});
As a result my controller is giving me a pure json which I can see (in Chrome Dev Tools under Response section) if I type my url directly into browser, but when js code is executed I see the following error:
Uncaught (in promise) SyntaxError: Unexpected token <
which is related to my initial file which begins from !doctype html. In my debugger if I log response.body I see that it is ReadableByteStream, but not my json. I think that the problem is somewhere in Symfony because I can read my json if I send it from regular .php file but not from RESTFul controller. Any help would be appreciated.
UPD:
when I changed response.json() to response.text() I finally got the data)) Is there any reason for that? And in addition in my url I have query string parameters (like ?par1=1&par2=2) which I want to pass to my REST Controller and which I get when I again type my url into browser directly with the following method:
$data = $request->query->get('data');
But when I pass it with JS fetch (in url parameter) no data is transferred to controller. Any idea what to do in this case? Thank You
UPD2
My symfony config.yml
fos_rest:
param_fetcher_listener: true
body_listener: true
format_listener: true
view:
formats:
json: true
xml: false
html: false
rss: false
templating_formats:
json: false
xml: false
html: false
rss: false
view_response_listener: 'force'
sensio_framework_extra:
view: { annotations: false }
router: { annotations: true }
Try to add this in your config :
fos_rest:
# ...
view:
# ...
formats:
json: true
If it doesn't work, add the following :
fos_rest:
# ...
format_listener:
rules:
- { path: '^/yourApiPrefix', priorities: ['json'], fallback_format: json, prefer_extension: false }

Categories