We Keep Coding

Populating JsTree with JSON variable

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.

Return JSON results as JS array with AJAX?

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

Trouble with JSON.Parse - console shows error in DOCTYPE

I am trying to write some JSON data to a div with JQuery:
var obj = JSON.parse(data);
$('#container').html(obj.services.service[0].code);
But I get an error saying there is a Syntax error in my DOCTYPE:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
I read in other posts that this could be because of quotation marks around the JSON object. I have tried to add different quotes around the JSON object but with no luck, eg: var obj = JSON.parse("'" + data + "'");
I am not sure how to tackle this one. Can anyone point me in the right direction?
Thanks
The JSON data looks 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": [
{
AJAX call:
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'AusPostDomestic.php',
data: {toPostcode: toPostcodeValue, parcelLengthInCMs: parcelLengthInCMsValue, parcelHeighthInCMs: parcelHeighthInCMsValue, parcelWidthInCMs: parcelWidthInCMsValue, parcelWeightInKGs: parcelWeightInKGsValue},
success: function(data) {
//console.log(data);
var obj = JSON.parse(data);
$('#auspostresult').html(obj.services.service[0].code);
}

You have alreadyb added datatype as json , no need to parse it again. So remove line var obj = JSON.parse(data); from your success callback function.
$.ajax({
type: 'POST',
dataType: 'JSON',
url: 'AusPostDomestic.php',
data: {
toPostcode: toPostcodeValue,
parcelLengthInCMs: parcelLengthInCMsValue,
parcelHeighthInCMs: parcelHeighthInCMsValue,
parcelWidthInCMs: parcelWidthInCMsValue,
parcelWeightInKGs: parcelWeightInKGsValue
},
success: function(obj) {
//console.log(data);
$('#auspostresult').html(obj.services.service[0].code);
}
});
Api Doc : http://api.jquery.com/jquery.ajax/

invalid character javascript error while using JSON.parse

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.

How to get jstree to work properly with ajax loaded content

For a project I am trying to create an ajax-powered treeview control. My ajax scripts are working fine on the back end, but the tree is not being displayed properly. When I hard code the ajax response into my tree container, it is displayed properly:
However, when I try to load the tree via ajax I get this:
Here is my JS code:
$(document).ready(function() {
function customMenu(node) {
var items = {
createItem : {
label : "Generate random number(s)",
action: function() {
console.log("Creating children...");
var selectedId = $("#treeview").jstree("get_selected").attr("id");
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: "libs/add.php",
data: "fact_id=" + selectedId,
dataType: "json",
success: function(data) {
console.log(data);
}
});
}
}
}
return items;
}
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"], contextmenu: {items: customMenu, select_node: true}
});
$.ajax({
url: "libs/display.php",
dataType: "json"
}).success(function(data) {
$("#treeview ul").append(data);
});
});
Does anyone have any idea what my problem is? Any help would be appreciated.
EDIT
After looking closer, I realize that the exact problem is that the necessary classes are not being added to the child nodes when calling via ajax. Still, I'm not sure why.
ANOTHER EDIT
display.php now contains this response text:
[
{
"attr": {
"id": 1
},
"data": 649,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 108,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 86,
"state": "closed"
},
{
"attr": {
"id": 1
},
"data": 46,
"state": "closed"
}
]
Am I headed in the right direction?

Is your stylesheet being included, and have you set up correct URLs to the icons? It looks to me like that's why your data isn't being styled. However, looking at your code, a more likely reason that you aren't getting your styling is because you are just calling an arbitrary AJAX call outside the jsTree scope.
Take a look at the docs for the json_data plugin for jsTree. It's easy to use, provided you set up display.php correctly to only fetch the node that jsTree is requesting. It will make concurrent calls and get the nodes it needs, your script simply needs to serve them to it:
$("#treeview").jstree({
"plugins" : ["themes", "html_data", "ui", "crrm", "contextmenu"],
"contextmenu": {
items: customMenu,
select_node: true
},
"json_data": {
"ajax": {
"url": "libs/display.php",
"data": function(n) {
return { id : n.attr ? n.attr("id") : 0
}
}
}
});
The json_data plugin basically acts as a wrapper for a jQuery AJAX call, but the events are bound directly the jsTree core and the returned results are handled by jsTree. You'll probably need to tweak your return values a bit depending on what display.php is responding with, and what you have set your tree up to look like structurally.
Edit
This is a similar post that might help you:
jsTree and AJAX > Load all data via ajax