My application passes the entire tree hierarchy from PHP to Javascript via JSON. There are no AJAX calls, no lazy loading. However, what I'm finding is that I cannot actually disable the lazy load aspect of the list expanding method.
For example:
If this is the json passed from my PHP script:
[{
"title": "Southeast",
"key": 28,
"children": [{
"key": 2,
"title": "North Carolina",
"children": [{
"key": 68,
"title": "Charlotte"
}, {
"key": 69,
"title": "Raleigh"
}]
}, {
"key": 1,
"title": "South Carolina",
"children": [{
"key": 1,
"title": "Columbia"
}, {
"key": 2,
"title": "Baldwin County"
}, {
"key": 3,
"title": "Barbour County"
}, {
"key": 4,
"title": "Bibb County"
}]
}]
},
{
"title": "Northeast",
"key": 32,
"children": [{
"key": 3121,
"title": "Albany County",
"children": [{
"key": 3121,
"title": "Albany County"
}, {
"key": 3122,
"title": "Big Horn County"
}]
}, {
"key": 3122,
"title": "Big Horn County"
}]
},
{
"title": "Midwest",
"key": 167
},
{
"title": "Mid-Atlantic",
"key": 31
},
{
"title": "Southwest",
"key": 166
}]
And I create the fancytree:
$('#tree').fancytree({
source: 'php_script.php'
extensions: ['edit']
});
I can't see the second or third level tiers even in the DOM until I actually click the expander next to the respective parent tiers (Southeast, Northeast, etc.) What I'd like to be able to do, is "see" the tiers in the DOM (inspector/console) BEFORE a click on the expanders. Any idea how to do this? I assume this has to do with lazy loading, however, I've tried the following:
$('#tree').fancytree({
...
lazyLoad: function(event, data) {
return false; // I understand this is likely hack-ish, but it still didn't work
},
Or set the lazy property directly on each node with no luck:
[{
"title": "Southeast",
"key": 28,
"lazy":false,
"children": [{
"key": 2,
"lazy":false,
"title": "North Carolina",
"children": [{
"key": 68,
"lazy":false,
"title": "Charlotte"
}, {
"key": 69,
"lazy":false,
"title": "Raleigh"
}]
}
...
I've checked the nodes to ensure they're actually not lazy:
$('#tree').fancytree({
'beforeExpand': function(event, data){
console.log(data.node.isLazy());
},
'expand': function(event, data) {
console.log(data.node.isLoaded());
},
...
and in the console, I receive what I expected:
false
true
I understand that if the number of nodes begins becomes quite large, then NOT lazy loading them will begin to slow the page down. I also understand that I can force all of the nodes to load by triggering an expand on all nodes through this:
if(all) {
$('#tree').fancytree('getTree').visit(function(node){
node.setExpanded(expand);
});
}
But it feels like there should be an easier way to do this. I want the entire DOM loaded, but immediately on fancytree instantiation. Any thoughts?
Lazy loading would issue an Ajax request to load child nodes on first expand (if the parent is marked lazy).
What you describe is lazy rendering: The complete model is already loaded, but Fancytree generates DOM elements on demand. In most cases this leads to much better user experience, because browsers tend to slow down when the number of DOM elements grows too large.
See also here for concepts.
However, if you want to render all nodes after load, have a look at the node.render() method:
$("#tree").fancytree({
source: "php_script.php",
extensions: ["edit"]
init: function(event, data) {
data.tree.getRootNode().render(true, true);
},
...
});
Related
This is a JSON snip that is created in WooCommerce by a plugin that adds some metadata. I cannot change the formatting of this JSON because it is generated by a plugin. The problem is that the keys and the values are added in a weird way. I am iterating through the line_items and statically referencing this data which I don't want to do, I would like to know if there is a smart way to reference for example:
"key": "_cpo_product_id",
"value": "3572",
if this was formatted correctly it would be: "_cpo_product_id": "3572" and not have "value" as a key, and it would be accessed by: foo.line_items[i]._cpo_product_id
but with this configuration I am a bit lost, I am sure there is an easy way to find the value for a specific key. I am doing this on Google app scripts, but a solution in JavaScript should suffice.
JSON snip:
"line_items": [
{
"id": 749,
"name": "Dune",
"product_id": 3572,
"variation_id": 0,
"quantity": 1,
"tax_class": "",
"subtotal": "149.54",
"subtotal_tax": "31.40",
"total": "149.54",
"total_tax": "31.40",
"taxes": [
{
"id": 24,
"total": "31.403148",
"subtotal": "31.403148"
}
],
"meta_data": [
{
"id": 11919,
"key": "_cpo_product_id",
"value": "3572",
"display_key": "_cpo_product_id",
"display_value": "3572"
},
{
"id": 11920,
"key": "_add-to-cart",
"value": "3572",
"display_key": "_add-to-cart",
"display_value": "3572"
},
I have the following array of objects.
I want to search the word Powai (case insensitive). But when I search the word I am not getting the results with the word (Powai) with parenthesis. I have attached the code below the JSON. Please help.
I am using https://github.com/kentcdodds/match-sorter this library along with the <Autocomplete /> component of Material-UI react to filter the results based on the input query.
[
{
"id": 31,
"name": "Powai",
},
{
"id": 3474,
"name": "Powai Chowk Mulund",
},
{
"id": 3475,
"name": "Powai Vihar Complex",
},
{
"id": 2428,
"name": "Forest Club Powai",
},
{
"id": 2635,
"name": "Hiranandani Powai Bus Station",
},
{
"id": 3561,
"name": "Ramda Hotel (Powai)",
},
{
"id": 2244,
"name": "Crisil House (Powai)",
},
{
"id": 2662,
"name": "I.R.B.Complex(Powai)",
},
{
"id": 2890,
"name": "Kingston Sez (Powai)",
},
{
"id": 3972,
"name": "Tatapower Centre (Powai)",
},
{
"id": 2362,
"name": "Dr.Ambedkar Udyan (Powai)",
},
{
"id": 2389,
"name": "E.S.I.S.Local Office Powai",
},
]
match-sorter version: ^4.1.0
node version: 12.14.0
npm (or yarn) version: 6.14.4
Relevant code or config
matchSorter(options, inputValue, {
keys: ["name"],
threshold: rankings.WORD_STARTS_WITH,
keepDiacritics: true,
});
I fixed the issue by changing the threshold value to threshold: rankings.CONTAINS.
That solved my problem.
I am looking for JSON parsing reference, from where I can jump to question and check for Child question based on Yes section. I didn't find anything related to check for child node check in JSON. Angular is my base framework.
some use cases :
on load show Root question,
On selection show next questions which is child of root then go one
jump to number of questions from tree.
treeObj={
"Root_Element": {
"id": "myTree",
"dt": {
"choice": {
"id": '0',
"title": "Which color",
"description": "Choose color ?",
"choice": [
{
"id": 1,
"title": "Yellow",
"description": "Yellow ? ,
"choice": [
{
"id": 5,
"title": "Dark Yellow",
"description": "Dark Yellow ?
},
{
"id": 4,
"title": "Light Yellow",
"description": "Light Yellow ?
}
]
},
{
"id": 2,
"title": "Red",
"description": "Red ?"
},
{
"id": 3,
"title": "Green",
"description": "Green ?
}
]
}
}
}
}
If the number of levels in the JSON object is fixed and if it does not grow dynamically, you can use the ES6 destructuring to read the data from the nested JSON. Below is an example
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
In this Treemap example, the whole JSON tree exists from the start:
http://jsfiddle.net/6p1gayrp/
As I have a very big dataset, I would like to load each level on click:
Clicking "International relations" in the example should instead load the children array from a remote datasource and then layout the rectangles.
So starting out with one level:
var json = {
"name": "Sitemap",
"children": [{
"name": "International Relations",
"value" : 700
}]
}
And then adding more data to the tree before recalculating layout:
var json = {
"name": "Sitemap",
"children": [{
"name": "International Relations",
"children": [{
"name": "Systemic Theory",
"children": [{
"name": "Great Powers",
"value": 400,
}, {
"name": "Systemic Politics",
"value": 300,
}]
}]
}]
}
How can I load data async while keeping the rest of the functionality intact?
(Ideally this would also work in the other direction: For example if a user navigates straight to a particular level of the treemap and then starts going up the hierarchy.)
I have a system that makes JSON responses like this. This is a list to use in a table. I have never seen this way of writing the field names first and then the data in another set?
Is this way of writing JSON data called something special?
I cannot figure how to read the response in my javascript/jQuery, does anyone have an example or google hint?
(anyone know if "jtable" can read it?)
"WBEMLIST": {
"header": [
{
"name": "K9LBNR"
},
{
"name": "K9BEM"
},
{
"name": "CBRUGER"
},
{
"name": "CDATO"
},
{
"name": "CTID"
},
{
"name": "UBRUGER"
},
{
"name": "UDATO"
},
{
"name": "UTID"
}
],
"entries": [
[
1,
"Albert Einstein described\\the \"ork of theorists as making",
"WEBUSERFAU",
20140620,
114036,
"",
0,
0
],
[
3,
"of reality is incomplete. Thus the concept that Einstein",
"WEBUSERFAU",
20140620,
114036,
"",
0,
0
],
}
EDIT: I can easily read a list in javascript that i wrote like this in JSON, but not the above!:
{
"Bildlist": [
{
"K8LBNR": "1",
"K8IMAG": "/HB0WKL3Q.PDF",
"K8TYPE": "D",
"K8LINKB": "",
"CBRUGER": "WEBUSER",
"CDATO": "2014.06.03",
"CTID": "13.54.55"
},
{
"K8LBNR": "1",
"K8IMAG": "/HB0WKL3Q.PDF",
"K8TYPE": "D",
"K8LINKB": "",
"CBRUGER": "WEBUSER",
"CDATO": "2014.06.03",
"CTID": "13.54.55"
}
]
}