I am working with dhtmlxtree and are having issues getting it loading data from json fed to it by an external script. I am getting the error below. Any ideas? Thanks!
ErrorType: LoadXML
Error: Incorrect JSON
My HTML looks like this:
<body>
<div id="treeBox" style="width: 200px; height: 200px; overflow: auto;"></div>
<script>
jQuery( document ).ready(function() {
tree = new dhtmlXTreeObject("treeBox", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../sma-js/dhtmlxtree/img/csh_bluebooks/");
tree.setXMLAutoLoading("sma-php/loadcustomers.php");
tree.setDataMode("json");
//load first level of tree;
tree.loadJSON("sma-php/loadcustomers.php?id=PNR0000000001");
});
When I manually run the script, the JSON returned looks like this:
[{"phys_addr_state":"ACT","phys_addr_postcode":"2167","install_address":"2 Eade Street - Radiative, John"},{"phys_addr_state":"NSW","phys_addr_postcode":"2263","install_address":"69 The Corso - Flare, Steve"}, {"phys_addr_state":"NSW","phys_addr_postcode":"2112","install_address":"17 Price Street - Solar, Anita"},{"phys_addr_state":"QLD","phys_addr_postcode":"4001","install_address":"71 Eagle Street - Corona, Linda"},{"phys_addr_state":"VIC","phys_addr_postcode":"3053","install_address":"15 Lygon Street - Photon, Marco"}]
The issue I notice is the structure / hierarchy of my JSON. It contains an item per record, whereby other examples I see in dhtml site show a "hierarchical" JSON record. My encode on the server is done by:
echo json_encode($data);
The other dhtml example of JSON (for comparison) is:
{ id: 0, item: [{ id: 1, text: "1111" }, { id: 2, text: "222222", item: [{ id: "21", text: "child" }] }, { id: 3, text: "3333" }]}
Is there a different way to encode the sql records whereby all records of same state will be grouped together under the same entry per "id: 2 item above" per example above?
My header includes the following:
<script src="../sma-js/d3.v3/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" type="text/css" href="../sma-js/dhtmlxtree/css/dhtmlxtree.css">
<script src="../sma-js/dhtmlxtree/js/dhtmlxcommon.js"></script>
<script src="../sma-js/dhtmlxtree/js/dhtmlxtree.js"></script>
<script src="../sma-js/dhtmlxtree/js/dhtmlxtree_json.js"></script>
You should use specific JSON format, the same as in dhtmlx demos. However, it would be easier and faster to use dhtmlxConnector (free to use with dhtmlx components) instead of custom scripts. The Connector helps to generate XML output, and all you need is to set up table fields for tree XML.
Related
react-redux-firebase supports replacing ids with the corresponding value in a lookup object – like a join – through a config object called populates (and later using a convenient mapping function inside mapStateToProps).
Unfortunately, the documentation of react-redux-firebase is rather rudimentary in this area (and in others)...
Can someone tell me, whether it's possible to populate a list of ids?
For example:
// from:
{ friends: [1, 27, 42] }
// to:
{ friends: [
{ id: 1, name: 'Charlie' },
{ id: 27, name: 'Parker' },
{ id: 42, name: 'Brown' },
] }
Testing version 3.0.0, it seems that populating a list works exactly the same as replacing a single field. Instead of receiving back an object you will receive an array of replaced objects.
First time attempted ractive and got errors. [Object object] printed repeatedly.
Tried to merge both files into one (problem is that the collection and ad are different so how to combine both?)
Advertisements and non-advertisements would be printed out respectively, meaning advertisement items should be printed out first in freewall layout and after that, non-ad items will be printed out.
Somewhere in code i might have gone wrong.
Ractive Template
<script id="thumbnail-tmpl" type="text/ractive">
{{items}}
{{#if advertised}}
<div class="thumb">
<span class="thumb-caption">
{{title}}
<small>{{subtitle}}</small>
</span>
</div>
{{else}}
<div class="thumb">
<span class="thumb-caption">
{{title}}
<small>{{subtitle}}</small>
</span>
</div>
{{/#if advertised}}
{{items}}
</script>
Script
<script>
;(function() {
var finalObj = $.merge(collections, ad);
$.getJSON(finalObj)
.then(function(response){
new Ractive({
el: document.querySelector('[data-freewall]'),
template: '#thumbnail-tmpl',
data:{
items: response,
advertised: response.advertised
}
})
});
})();
</script>
HTML
<div data-freewall></div>
How to combine two json into one? They will be two different files so will pull json from files later.
Advertised is not working for conditional to print ad and non-ad items. Tried tutorial conditional on ractive website..
Is it possible to print ad items first then non-ad items second before laying them out in freewall layout (in case if you don't know what freewall is, http://vnjs.net/www/project/freewall/?
help will be appreciated.
Updated: Still have problems
Keep on seeing test message -
[object Object],success,[object Object],[object Object],success,[object Object]
Also {{/if}} and {{/each}} are giving illegal errors
$.when(
$.getJSON('pathto/test/collection.json'),
$.getJSON('pathto/test/ad.json')
).then(function(collections, advertised){
var items = collections.concat(advertised);
alert(items);
items.sort(function(a, b){
if(a.advertised){
return b.advertised ? 0 : -1;
}
else{
return b.advertised ? 1 : 0;
}
});
var ractive = new Ractive({
el: document.querySelector('[data-freewall]'),
template: '#thumbnail-tmpl',
data:{
items: items
}
});
});
In json files from two urls
{
"advertised": [
{ "title": "Rabbit",
"subtitle": "Nibble",
"advertised": true
},
{ "title": "Dog",
"subtitle": "Woof",
"advertised": true
},
{ "title": "Cat",
"subtitle": "Purr",
"advertised": true
}
]
}
{
"collections": [
{ "title": "Horse",
"subtitle": "Na~~",
"advertised": false
},
{ "title": "Turkey",
"subtitle": "Gobble",
"advertised": false
},
{ "title": "Goat",
"subtitle": "Baaaa",
"advertised": false
},
{ "title": "Snake",
"subtitle": "hissssss",
"advertised": false
}
]
}
Still not seeing anything display on the page - show blank even if errors are corrected. I am wondering if the json files are a reason -- because we can't access to collection and advertised in json files?
Help please and appreciate it
The reason you're getting [object Object] is that you're trying to print {{items}} directly - use {{#each items}}...{{/each}} instead (or just {{#items}}...{{/items}} if you prefer the compact syntax). There's also an error with {{/#if advertised}} - use {{/if}} instead.
The easiest way to combine data from two different JSON files, if you're using jQuery AJAX, is probably to nest the callbacks...
$.getJSON('path/to/collections.json').then(function (collections) {
$.getJSON('path/to/advertised.json').then(function (advertised) {
// code goes here
});
});
...though it would be more ideal to use deferreds so that you can fetch the files in parallel:
$.when(
$.getJSON('path/to/collections.json'),
$.getJSON('path/to/advertised.json')
).then( function ( a, b ) {
var collections = a[0].collections, advertised = b[0].advertised;
// code goes here
});
Now for the code to combine the two arrays. You don't need to use jQuery for this, since you're just concatenating two arrays:
var items = collections.concat( advertised );
You can sort them however you like using items.sort(sortFunction). Feed that into your Ractive instance, and everything works as expected (there's an example sort function there).
Once you've done that, you can use the freewall plugin on the container element.
For reasons I won't bore you with, ALL elements of my webpage must be embedded into one file.
Between the HTML header tags, I have valid JSON data declared:
<script type="application/json" id="data">
"name": "flare", "children":[{"name": "thing1", ... }]
</script>
Previously this data was written to a JSON file which was referenced by my D3 bar chart scripts as follows:
d3.json("data/file.json", function(root) {
hierarchy.nodes(root);
x.domain([0, root.value]).nice();
down(root, 0);
});
I have been able to pass the embedded JSON to an object after following this thread:
Best practice for embedding arbitrary JSON in the DOM?
How can I now successfully pass this object to the D3 bar chart?
Parsing the embedded JSON object was the hard part, so you've basically got this one figured out. Once you have the embedded JSON parsed and passed to an Object, you can just start using that Object.
Building off of your example, say you had this JSON data embedded in your page:
<script type="application/json" id="data">
{"name": "flare", "children":[{"name": "thing1", ... }]}
</script>
Then instead of using
d3.json("data/file.json", function(root) {
...
}
just extract the body of the function you were using, and load the JSON object at the top:
var root = JSON.parse(document.getElementById('data').innerHTML);
hierarchy.nodes(root);
x.domain([0, root.value]).nice();
down(root, 0);
...
The method described in the question you've linked to will work. Just call the variable whatever you're using in your D3 code, e.g.
var root = JSON.parse(document.getElementById('data').innerHTML);
I am using jQuery EasyUI to create a checkbox tree. I tried their demos, and it works great locally. When I tried it on the server, I do not see the tree list.
I included the necessary js files:
- jquery-1.6.1.min.js
- jquery.easyui.min.js
Here is the html:
<ul id="tt" class="easyui-tree"
url="data/tree_data.json"
checkbox="true">
</ul>
Here is the JSON data:
[{
"id":1,
"text":"Fruits",
"state":"closed",
"children":[{
"text":"Apple"
},{
"text":"Pear"
}]
}]
How can I get the json data to load on my page?
Thanks in advance
data = $.parseJSON(var);
alert(data.id);
where var contains your json data.
can the popular javascript tree views (jstree, dynatree...) be setup to read data from an adjacency model?
say I have a table with classId, ClassName,ClassType,ParentClassId how can i fetch data for say the dynatree? considering the json expected by dyna tree should something like below
{title: "Class1"},
{title: "Class2", isFolder: true,
children: [
{title: "Class4"},
{title: "Class5"}
]
},
{title: "Class3"}
I am using an asp.net asmx web service with linq to sql at the backend
The only thing you have to do to have nodes loaded on demand is to add "state" : "closed" to the nodes whose child nodes are going to be loaded on demand.
You can have all your necessary attributes classId, ClassName,ClassType,ParentClassId attached to the node so then you can pass it through via ajax.
ur code
"json_data": {
//elements to be displayed on the first load
//everything with state = closed will be populated via ajax.
// Note the ajax arguments
"data": [{"data":'Class 1',
"attr":{"id":'kit1',
"ClassName":"ClassName",
"classId":"classId"},
"state" : "closed"},
{"data":'Class 2',
"attr":{"id":'kit2',
"ClassName":"ClassName",
"classId":"classId"},
"state" : "closed"}
],
"ajax" : {
url : "http://localhost/introspection/introspection/product",
data : function(n) {
return {
"classId":$.trim(n.attr('classId')),
"ClassName":$.trim(n.attr('ClassName')),
}
}
}
}