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.
Related
I am trying to add, update, delete in JSON server with Redux Axios. But I am unable to perform CRUD action. I am always getting an error 404. I am using the following code example. this my db.json
{
"orderdetails": [
{
"OrderID": 111,
"CustomerID": "VINET",
}
]
}
I am using the following code for importing Axios from redux. Please find my server.js
import axios from 'axios';
export default axios.create({
baseURL: "http://localhost:3007/",
headers: {
"Content-type": "application/json"
}
})
I am using the following code example for performing CRUD action in the JSON-Sever. But, I am got a error
import http from "../serverapi";
create(data) {
return http.post("/orderdetails/posts", data);
}
update(id, data) {
return http.put(`/orderdetails/${id}`, data);
}
delete(id) {
return http.delete(`/orderdetails/${id}`);
}
could you please provide the suggestion?
If you are using the json-server npm package, there are a couple of problems with your usage.
First, you db.json is invalid. It should be somewhat like this:
{
"orderdetails": [
{
"OrderID": 111,
"CustomerID": "VINET"
},
{
"OrderID": 12,
"CustomerID": "VINET"
}
]
}
Make sure to check the API url in the browser first.
Second, json-server by default runs on localhost:3000 (Not sure if it can be changed, check the docs here https://www.npmjs.com/package/json-server). Your API is pointing to port 3007 as seen here baseURL: "http://localhost:3007/,
Lastly, you cannot do a request like http://localhost:3000/orderdetails/111. The last part in the api url by default corresponds to the id key in db.json, but since your key is OrderID, your API end point should be modified to http://localhost:3000/orderdetails?OrderID=111. Try this url in your browser, it should return the correct object.
UPDATE
Update operations in json-server require the id key to be present in the db.json file. Hence, update your db.json as follows:
{
"orderdetails": [
{
"id": 1,
"OrderID": 111,
"CustomerID": "VINET"
},
{
"id": 2,
"OrderID": 12,
"CustomerID": "VINET"
}
]
}
Then, you can try running a POST request on the url http://localhost:3000/orderdetails and json body :
{
"OrderID": 12333,
"CustomerID": "VINET"
}
This will create a new object in the db, with incremented id. PUT, DELETE requests can be made using the id param in the url like http://localhost:3000/orderdetails/3.
I'm creating a discord bot for a server with a few friends - I have a warn system and level system.
I've managed to get the JavaScript to write to the external JSON file.
{
"other-users": "other-user-data",
"304937039483493847": {
"amount": 1,
"id": "<#304937039483493847>",
"username": "Jered",
"reasons": {
"first-reason": "test"
}
},
"other-users": "other-user-data"
}
I've managed to get the data to change from warnings to remove warnings, but I need to delete the whole 304937039483493847 object from the file.
What would be the best way to do that?
I hope it is what you need.
let data = {
"304937039483493847": {
"amount": 1,
"id": "<#304937039483493847>",
"username": "Jered",
"reasons": {
"first-reason": "test"
}
},
"other-users":"other-user-data"
};
console.log(data);
delete data["304937039483493847"];
console.log(data);
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.
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']
}