I'm passing an object of data from a Python/Django App to the front end using AJAX in JSON form. Everything is working correctly, except that I cannot parse the JSON object once in Javascript. I keep getting undefined. I've tried every approach I could think of and I am super stuck so I wanted to see if someone might be able to point out what I hope is a super simple oversight!
Snippet of Python/Django:
data = serializers.serialize('json', products)
response = {'product_data': data,
'product_count': product_count}
return HttpResponse(json.dumps(response), content_type='application/json')
Snippet of AJAX Callback:
.done(function(data){
console.log(data.product_count)
console.log(data.product_data)
console.log(data.product_data["model"])
console.log(data.product_data[0])
console.log(data.product_data[0]["model"])
})
Console Logs Response Snippet:
>1
>[{"model": "seller.product", "pk": 11048, "fields": {"seller": 132, "width": 211, "height": 3, "length": 350, "weight": 18600, "price": 11077, "color_id": null, "po_number": null, "po_sub_number": null, "custom_order_id": null, "active_at": "2019-08-02T01:27:23.410Z", "deactive_at": null, "in_holding": false, "approved_at": "2019-08-04T15:34:08.318Z", "sold_at": "2020-02-07T20:07:54.675Z", "slug": "colored-beni-ourain-rug", "created_at": "2019-08-02T01:23:51.650Z", "updated_at": "2020-02-07T20:07:54.675Z", "assets": [3567, 3581, 3585, 3572, 3573, 3574, 3577, 3582, 3583, 3584, 3586, 3587, 3589, 3594, 3596], "colors": [1, 2, 3, 4, 12], "shipping_options": [1]}}]
> undefined
> [
> undefined
The first console log of 1 is correct and in the second line the data I want is all there. But any time I try and get info out of it I just get undefined or a ] and I cannot figure it out. Can anyone help? Thank you!
Use JSONResponse instead of HttpResponse.
That way you don't need to handle anything in between.
return JSONResponse(products)
:)
"json.dumps" would've been sufficient tho, no need for another call to the serializer.
You're serializing you data multiple times, just put products into response without serializing it.
response = {'product_data': products,
'product_count': product_count}
return HttpResponse(json.dumps(response), content_type='application/json')
I believe you need to JSON.parse(data.product_data) first.
Related
I know this will be a very stupid question, but I've been pulling my hair out trying to figure this out. I'm getting the following response back from an API I'm using:
{
"item_id": "51c3d78797c3e6d8d3b546cf",
"item_name": "Cola, Cherry",
"brand_id": "51db3801176fe9790a89ae0b",
"brand_name": "Coke",
"item_description": "Cherry",
"updated_at": "2013-07-09T00:00:46.000Z",
"nf_ingredient_statement": "Carbonated Water, High Fructose Corn Syrup and/or Sucrose, Caramel Color, Phosphoric Acid, Natural Flavors, Caffeine.",
"nf_calories": 100,
"nf_calories_from_fat": 0,
"nf_total_fat": 0,
"nf_saturated_fat": null,
"nf_cholesterol": null,
"nf_sodium": 25,
"nf_total_carbohydrate": 28,
"nf_dietary_fiber": null,
"nf_sugars": 28,
"nf_protein": 0,
"nf_vitamin_a_dv": 0,
"nf_vitamin_c_dv": 0,
"nf_calcium_dv": 0,
"nf_iron_dv": 0,
"nf_servings_per_container": 6,
"nf_serving_size_qty": 8,
"nf_serving_size_unit": "fl oz",
}
And this is the code that I'm trying to run:
var rp = require('request-promise');
module.exports = {
getIngredients: function(req, callback) {
rp({
method: 'GET',
uri: `https://api.nutritionix.com/v1_1/item?upc=${req.body.upc}&appId=${process.env.NUTRITIONIX_APP_ID}&appKey=${process.env.NUTRITIONIX_APPP_KEY}`
}).then((data) => {
console.log(`Talked to NutritionixAPI, result was: ${data}`);
var ingredients = data.nf_ingredient_statement.split(',');
console.log(`Ingredients split from the data are: ${ingredients}`);
return callback(ingredients);
}).catch((err) => {
console.log(`Error occured in NutritionixAPI, ${err}`)
return callback(Object.assign({}, err, { error: true }));
});
}
}
What I'm trying to figure out is why data gets printed to the console properly, but as soon as I try to access any value inside, I get the error of it being undefined. I've tried other values in the JSON as well, so I would very much appreciate the help!
EDIT: I want to clarify what the question is about, it's not about the callback and async calls because those work perfectly. My issue is specifically with var ingredients = data.nf_ingredient_statement.split(','); where nf_ingredient_statement is undefined even though obviously it isn't.
Apparently what I was getting back was a JSON string. So I just needed to do data = JSON.parse(data) to parse it into actual JSON.
The problem is that data is a JSON string so you can't access it before parsing it, that's why data.nf_ingredient_statement is undefined.
You need to parse data first, your code should be like this:
var json = JSON.parse(data);
var ingredients = json.nf_ingredient_statement.split(',');
I'm writing a simple JS app that takes in a JSON file, displays the information to the user and allows them to modify it, and then allows them to re-export the JSON. However, the JSON that is being brought in is multi-line; each key/value is on its own line. When I use .stringify to output the JSON, it all appears on one line. Is there any way for the stringify method to separate the lines?
JSON Structure:
{"Title":
{"lvlOne":[
{"key":"val"},
{"key":"val"},
{"key":"val"}
],
"lvl2":[
{"key":"val"},
{"key":"val"},
{"key":"val"}
]}
}
But when I output, it all shows:
{"Title":{"lvlOne":[{"key":"val"},{"key":"val"},{"key":"val"}],"lvl2":[{"key":"val"{"key":"val"},{"key":"val"}]}}
You can use the space parameter of the stringify method. From the official page, here is the relevant excerpt:
JSON.stringify({ a: 2 }, null, " "); // '{\n "a": 2\n}'
you can also use.
var json = JSON.stringify({ uno: 1, dos : {"s":"dd","t":"tt"} }, null, '\t');
console.log(json);
Or even better, the count of spaces in the indentation:
var json = JSON.stringify({ uno: 1, dos : {"s":"dd","t":"tt"} }, null, 2);
None of the above worked for me the only thing that worked for me was
await fs.promises.writeFile('testdataattr.json',JSON.stringify(datatofile, null,'\r\n'),'utf8') ;
I've this json file:
{
"Tools": [
{
"Price": 25,
"Counter": 0,
"Multi": 4,
"PriceMult": 1.3,
"Name": "Cycler",
"ID": "Tool2"
},
{
"Price": 50,
"Counter": 0,
"Multi": 4,
"PriceMult": 1.3,
"Name": "Cycler",
"ID": "Tool3"
}
]
}
If I use getJSON it doesnt work:
$.getJSON("http://localhost/test/json/tool.json", function(data ) {
alert(data.Tools[0].Price);
});
If I use JSON.parse it works:
var obj = JSON.parse('{"Tools" : [{"Price": 25,"Counter": 0,"Multi": 4,"PriceMult": 1.3,"Name": "Cycler","ID": "Tool2"},{"Price": 50,"Counter": 0,"Multi": 4,"PriceMult": 1.3,"Name": "Cycler","ID": "Tool3"}]}');
alert(obj.Tools[0].Price);
Why is this so?
Edit:
With this code is the Output 25:
$.getJSON("http://localhost/test/json/tool.json", function(data ) {
alert(data.Price);
});
You probably need to access the file via:
$.getJSON("test/json/tool.json", function(data ) {
alert(data.Tools[0].Price);
});
I don't know the context root of your localhost server. The example above assumed it was the parent folder of test. If it is the test folder itself, remove test from the url string:
$.getJSON("json/tool.json", function(data ) {
alert(data.Tools[0].Price);
});
Have you checked the status of the $.getJSON call? This should give the status code indicating any issue with retrieving the file via the ajax request
Thanks to everybody for you help.
The Problem has solved itself. I tried it today with alert(data.Tools[0].Price); and it works.
Probably it's a Problem with the Cache.
I have a AngularJS-based frontend using restangular to fetch records from a Django backend I've built.
I'm making a call for a client list with the following:
var app;
app = angular.module("myApp", ["restangular"]).config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("http://172.16.91.149:8000/client/v1");
RestangularProvider.setResponseExtractor(function(response, operation) {
return response.objects;
});
return RestangularProvider.setRequestSuffix("/?callback=abc123");
});
angular.module("myApp").controller("MainCtrl", function($scope, Restangular) {
return $scope.client = Restangular.all("client").getList();
});
Chrome is showing the backend returning data with an HTTP 200:
abc123({
"meta": {
"limit": 20,
"next": "/client/v1/client/?callback=abc123&limit=20&offset=20",
"offset": 0,
"previous": null,
"total_count": 2
},
"objects": [{
"id": 1,
"name": "Test",
"resource_uri": "/client/v1/client/1/"
}, {
"id": 2,
"name": "Test 2",
"resource_uri": "/client/v1/client/2/"
}]
})
But once that happens I'm seeing the following stack trace appear in Chrome's console:
TypeError: Cannot set property 'route' of undefined
at restangularizeBase (http://172.16.91.149:9000/components/restangular/src/restangular.js:395:56)
at restangularizeCollection (http://172.16.91.149:9000/components/restangular/src/restangular.js:499:35)
at http://172.16.91.149:9000/components/restangular/src/restangular.js:556:44
at wrappedCallback (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:6846:59)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:6883:26
at Object.Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:8057:28)
at Object.Scope.$digest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:7922:25)
at Object.Scope.$apply (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:8143:24)
at done (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:9170:20)
at completeRequest (http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.js:9333:7) angular.js:5754
I did a breakpoint on line 395 in in restangular.js:
L394 function restangularizeBase(parent, elem, route) {
L395 elem[config.restangularFields.route] = route;
The first time it hits the breakpoint elem is just an object and route has the value of client.
The second time the breakpoint is hit elem is undefined and route has the value of client.
Any ideas why elem would be undefined the second time around?
When requesting lists, Restangular expects the data from the server to be a simple array. However, if the resulting data is wrapped with result metadata, such as pagination info, it falls apart.
If you are using Django REST Framework, it will return results wrapped like this:
{
"count": 2,
"next": null,
"previous": null,
"results": [
{
"id": 1,
"name": "Foo"
},
{
"id": 2,
"name": "Bar"
}
]
}
To translate this, you need to create a response extractor function. It's easiest to specify in the module config:
angular.module('myApp', ['myApp.controllers', 'restangular']).
config(function(RestangularProvider) {
RestangularProvider.setBaseUrl("/api");
// This function is used to map the JSON data to something Restangular
// expects
RestangularProvider.setResponseExtractor(function(response, operation, what, url) {
if (operation === "getList") {
// Use results as the return type, and save the result metadata
// in _resultmeta
var newResponse = response.results;
newResponse._resultmeta = {
"count": response.count,
"next": response.next,
"previous": response.previous
};
return newResponse;
}
return response;
});
});
This rearranges the results to be a simple array, with an additional property of _resultmeta, containing the metadata. Restangular will do it's thing with the array, and it's objects, and you can access the _resultmeta property when handling the array as you would expect.
I'm the creator of Restangular.
The restangularizeBase function is called first for your collection and then for each of your elements.
From the StackTrace, the element is OK, but once the collection is sent to restangularizeBase, it's actually undefined. Could you please console.log response.objects? Also, please update to the latest version.
Also, for the default request parameter, you should be using defaultRequestParams instead of the requestSuffix. requestSuffix should only be used for the ending "/"
Let me know if I can help you some more!
I am using the auto complete plugin by Devbridge and I have it all installed here is my code:
$(document).ready(function(){
$('#request_task').autocomplete({
serviceUrl: '<%= ajax_path %>',
minChars:1,
width: 300,
delimiter: /(,|;)\s*/,
deferRequestBy: 0, //miliseconds
params: { artists: 'Yes' },
});
});
This request hits my rails action and returns this json. there is only one object returned but most of the time there will be more then 1...this was just a test case:
[
{
"user": {
"salt": "somthing",
"name": "john",
"encrypted_password": "92dadsfa6b001ffe71c3c1d8e9fb76c42d1c8afeffa739de9063d94206c",
"created_at": "2010-09-10T14:10:54Z",
"updated_at": "2010-09-10T14:10:54Z",
"admin": null,
"id": 1,
"remember_token": "c945522b3eb0a25e36bb39155fc05b3eec301ac5e2196956f2e6f86b4b22c987",
"email": "test#gmail.com"
}
}
]
I can clearly see the request in firebug but I am not getting anything for the autocomplete and it errors out...Am i missing anything...My error is
a.suggestions is undefined
I think you need to read a little further down the developers page as your response is in the wrong format:
Web page that provides data for Ajax
Autocomplete, in our case
autocomplete.ashx will receive GET
request with querystring ?query=Li,
and it must return JSON data in the
following format:
{
query:'Li',
suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['LR','LY','LI','LT']
}
Notes:
query - original query value
suggestions - comma separated array of suggested values data
(optional) - data array, that contains values for callback function when data is selected.
Sincere advice , dont construct JSON Strings. Please go for an API.
If you are using java, check this out http://www.json.org/java/
and make sure to set content-type in response as application/json
YOUR JSON is in a wrong format
Check their correct format
{
query:'Li',
suggestions:['Liberia','Libyan Arab Jamahiriya','Liechtenstein','Lithuania'],
data:['LR','LY','LI','LT']
}