I am trying to convert a json string to object format read from a .js file.
Below is the JSON string in document.js
[
{
"type": "TableShape",
"id": "63c0f27a-716e-804c-6873-cd99b945b63f",
"x": 80,
"y": 59,
"width": 99,
"height": 107,
"name": "Group",
"entities": [
{
"text": "id",
"id": "49be7d78-4dcf-38ab-3733-b4108701f1"
},
{
"text": "employee_fk",
"id": "49be7d78-4dcf-38ab-3733-b4108701fce4"
}
]
}
];
now i am calling the document.js in window load using AJAX like below
$(window).load(function () {
$.ajax({
url: "JS/Draw2d/SampleData/document.js",
async: false,
success: function (result) {
debugger;
jsonStringFromServer = JSON.parse(result);//Here Javascript error stating invalid character
alert(jsonStringFromServer);
}
});
});
When the $.ajax function receives JSON, it automatically deserialises it for you. The error you're seeing is being cause because you're passing an object to JSON.parse, not a JSON formatted string - you don't need to use JSON.parse at all. Try this:
success: function (result) {
debugger;
console.log(result); // = the received object
}
I would also strongly suggest you remove async: false as it is extremely bad practice to use it.
Related
I am having trouble with accessing my json file from my javascript file. I would like to change the object to a different text in my json file once a submit button is clicked on the webpage. I am aware that I would use ajax to achieve this goal, but I do not know how to access the json file.
This is the db.json file
{
{
"assets": [
{
"id": "0946",
"manufacturer": "SONY",
},
{
"id": "0949",
"manufacturer": "AUDIOTECNIA"
}
],
"transfers": [
{
"id": 1,
"status": "in-progress"
}
]
}
This is my Javascript file
$('form').on('submit', function(e){
e.preventDefault();
parsedData = JSON.parse(db.json);
console.log(parsedData[0].id)
//Changing Status
$.ajax({
type: "PATCH",
url: `http://localhost:3000/transfers/`
});
I've tried using parseData because I read that is how to retrieve the object, from the json file, but I do not believe I am writing it correctly. What documentation or steps would one recommend for solving this issue?
You have an extra comma after "in-progress",
const parsedData = JSON.parse(`{
"transfers": [ {
"id": 1,
"status": "in-progress"
}]
}`)
Then, to access id in parsedData:
console.log(parsedData.transfers[0].id)
You did not initialize the variable parsedData.
var parsedData = JSON.parse(db.json);
I've been trying the whole day to get this thing working but somehow JsTree doesn't want to render my JSON data.
Here is the example JSON object:
{"parent":null, "ProductOption":null, "data":"HlaHd", "text":"global", "DelegationScope":0, "children":null, "entityId":1}
I get the JSON object through an AJAX call on $(document).ready():
if ($('#ProductTree').length) {
$.ajax({
type: "Post",
url: "/blah/blah",
dataType: "json",
data: { id : blah },
success: function (json) {
createJsTree(json);
}
});
}
And here is how I'm creating the tree:
function createJsTree(json) {
$('#ProductTree').jstree({
'core': {
'themes': {
'name': 'proton',
'responsive': true
},
'check_callback': true,
'data': json
}
});
}
At first I thought maybe my JSON object is faulty, so I printed the object on the chrome's console right before creating the JsTree:
function createJsTree(json) {
console.log(json);
$('#ProductTree').jstree({
'core': {
'themes': {
'name': 'proton',
'responsive': true
},
'check_callback': true,
'data': json
}
});
}
And the JSON object is exactly as I stated above. Now the funny thing is, if I just paste the literal JSON object as the data in JsTree creation like the following:
function createJsTree(json) {
$('#ProductTree').jstree({
'core': {
'themes': {
'name': 'proton',
'responsive': true
},
'check_callback': true,
'data': { "parent": null, "ProductOption": null, "data": "HlaHd", "text": "global", "DelegationScope": 0, "children": null, "entityId": 1 }
}
});
}
Then the tree gets rendered. What on earth is going on here?
It looks like you are trying to pass a string representing a json object instead of the object itself. It should work if you write data: JSON.parse(json) replacing data: json.
You need to parse responded JSON string to json format using JSON.parse().
Hope this will help.
I am adding the jQuery Autocomplete plugin to my project. I have a source value which is an array of objects (from a mySQL database). I am unable to map them into desired format of autocomplete.
This is the data want to map:
[{
"value": "730",
"label": "iPhone"
}, {
"value": "731",
"label": "Screen Protector"
}, {
"value": "732",
"label": "Maxboost"
}, {
"value": "733",
"label": "JETech"
}, {
"value": "734",
"label": "Mr Shield"
}]
$("#product_one").autocomplete({
source: $.ajax({
type: "GET",
url: "/wp-json/product/product-info/",
success: function(res) {
$.each(res, function(key, val) {
return {
"label": val.label,
"value": val.value
}
});
}
});
});
Any suggestion or modification of question would be appreciated.
The issue is because you're providing source with a jqXHR object, not an array, string or function as it expects (docs)
Given the use of AJAX, it would make the most sense for you to use provide a function which uses the request and response arguments. Also note that as the data you retrieve is already in the correct format (ie. an array of objects with label and value properties), you can provide it directly to response() without needing to loop through it. Try this:
$("#product_one").autocomplete({
source: function(request, response) {
$.ajax({
type: "GET",
url: "/wp-json/product/product-info/",
success: function(data) {
response(data);
}
});
}
});
You should first load your data and then set them as the source of the autocomplete.
$.ajax({
type:"GET",
url: "/wp-json/product/product-info/",
success:function(res){
//Based on your object creation, it looks that you can directly use the response
$( "#product_one" ).autocomplete(res);
}
});
Apologies in advance - I am new to this and so other answers have not been able to help me.
I have used AJAX to send data to a PHP script (part of a 3rd party API). The PHP script returns the results as JSON, but I have no idea how to format these on my HTML page.
Ultimately, I would like to save the JSON results as an array and then use JS/Jquery to format them on the page.
I am not sure how to modify the PHP and AJAX scripts to achieve this. Can anyone point me in the right direction?
My AJAX:
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {toPostcode: toPostcodeValue, parcelLengthInCMs: parcelLengthInCMsValue, parcelHeighthInCMs: parcelHeighthInCMsValue, parcelWidthInCMs: parcelWidthInCMsValue, parcelWeightInKGs: parcelWeightInKGsValue},
success: function(data) {
<!--NOT SURE WHAT TO PUT HERE-->
}
})
PHP (after the calculator does its thing - not sure if it needs to be changed):
$serviceTypesJSON = json_decode($rawBody);
echo json_encode($serviceTypesJSON);
The expected JSON results should look like:
{
"services": {
"service" : [
{
"code": "AUS_PARCEL_REGULAR",
"name": "Parcel Post (your own packaging)",
"speed": 2,
"price": 6.95,
"max_extra_cover": 5000,
"extra_cover_rule": "100,1.5,1.5",
"icon_url": "http://test-static.npe.auspost.com.au/api/images/pac/regular_post_box.png",
"description": "Based on the size and weight you've entered",
"details": "Check our ",
"delivery_time": "Delivered in up to 3 business days",
"ui_display_order": 1,
"options": {
"option": [
{
"code": "AUS_SERVICE_OPTION_STANDARD",
"name": "Standard Service",
"price": "0.00",
"price_type": "static",
"option_type": "optional",
"ui_display_order": 1
},
{
"code": "AUS_SERVICE_OPTION_SIGNATURE_ON_DELIVERY",
"name": "Signature on Delivery",
"price": 2.95,
"price_type": "static",
"option_type": "optional",
"tooltip": "Signature on Delivery provides you with the peace of mind that your item has been delivered and signed for.",
"ui_display_order": 2,
"suboptions": {
"option": {
"code": "AUS_SERVICE_OPTION_EXTRA_COVER",
"name": "Extra Cover",
"option_type": "optional",
"price_type": "dynamic",
"tooltip": "Extra Cover provides cover for loss, damage or theft of your item and will fully compensate you to the value specified for your item.",
"ui_display_order": 1
}
}
}
]
}
},
You can do two things, if the return data is JSON use dataType: "json" in the AJAX call.
Edit 1
If you are using dataType: "json". Which is more preferred if you are sure the data return is JSON string. data variable in the success will directly give you the JSON object. I think you can access it like data['services'].
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services;
}
Or you can just get the data then use jQuery.parseJSON() to parse the data string into JSON object.
$.ajax({
type: 'POST',
url: 'calculator.php',
data: {
toPostcode: toPostcodeValue,
parcelLengthInCMs: parcelLengthInCMsValue,
parcelHeighthInCMs: parcelHeighthInCMsValue,
parcelWidthInCMs: parcelWidthInCMsValue,
parcelWeightInKGs: parcelWeightInKGsValue
},
success: function (data) {
jsonObj = $.parseJSON(data);
//this gives you the inner onject of the return data
servicesObj = jsonObj.services; //or jsonObj["services"]
}
})
Your success function will never be called if you are using
echo json_encode(); in your php script.
You should add dataType:'json' after type:'POST' and then your success function will get called and will get the result returned by server in data
I am unable to figure out what is the problem with displaying json data..below is the code
var xhrGet1 = dojo.xhrGet({
url: "Page/",
handleAs: "json",
handle: function(response)
{
dojo.byId('json-data').innerHTML = response.questions[0];
}
});
Html
<div id='json-data'></div>
And my json file looks like this
{
"Info": {
"PURPOSE": ".... ",
},
"questions": [
{
"ID": 1,
"Question": "User ID",
"Information": "",
}, {
"ID": 2,
"Question": "Name",
"Information": "",
}
],
so on...any ideas??
The property handleAs : "json" in your xhr call makes the incoming json automatically eval'ed to javascript objects. So, you have to convert your javascript object back to string using JSON.stringify.
e.g. :
dojo.byId('json-data').innerHTML = JSON.stringify(response.questions[0]);
You can also use dojo.toJson for the same purpose. It uses json.stringify but has the benefit of having a second argument ("prettyprint"), allowing you to pretty-print out of the box, like this :
dojo.byId('json-data').innerHTML = dojo.toJson(response.questions[0], true);
wrap your JSON with PRE and CODE tags.
So:
dojo.byId('json-data').innerHTML = "<pre>code>" + response.questions[0] + "</code></pre>";
Also see: Display JSON as HTML for some libraries that can help you pretty-format your JSON when rendering in the browser