I have a tabulator table with below data / configuration;
Data;
var data_tab =
[ {
"code": "A",
"desc_tr": "Top Level",
"mylink": [
{
"code": "A.1",
"desc_tr": "Sub Level 1",
"mylink": [
{
"code": "A.1.1",
"desc_tr": "Sub Level 2",
"mylink": [
{
"code": "A.1.1.1",
"desc_tr": "Sub Level 3",
"mylink": [
{
"code": "A.1.1.1.001",
"desc_tr": "Item 1 at Last Level",
"income": "5",
},
{
"code": "A.1.1.1.002",
"desc_tr": "Item 2 at Last Level",
"income": "2",
}
]
}
]
}
]
},
]
} ]
Config / parameters for table;
let tmp_Tabulator = new Tabulator( "#tabulator_table",
{
data : data_tab,
columns : stg_Tabulator[ src_coldata ],
reactiveData : false,
dataTree : true,
dataTreeBranchElement : false,
dataTreeChildIndent : 0,
dataTreeChildField : "mylink",
height : 683,
}
)
This is the config / parameters for columns;
tbl_Sample : [
{
title : "G",
field : "",
width : 51,
formatter : null,
hozAlign : "left",
formatterParams : null
},
{
title : "CODE",
field : "code",
width : 100,
hozAlign : "left",
formatterParams : null
},
{
title : "DESCRIPTION",
field : "desc_tr",
width : 400,
formatter : null,
hozAlign : "left",
formatterParams : null
},
{
title : "INCOME",
field : "income",
width : 160,
formatter : "money",
hozAlign : "right",
formatterParams : fmt_num_2,
topCalc : "sum",
},
],
This is how table looks like when rendered ;
What should I do to populate income fields at upper levels ?
Thanks in advance...
PS : This is just a sample data and I do not want to do it at source data side (by changing query / json structure ect.) as it is very resource demanding.
New nodes won't be created when 'types' plugin is defined.
Please look at this fiddle.
I'm unable to create new Nodes in the tree.
http://jsfiddle.net/z8L5r9w3/1/
$('#jstree').jstree({
"core" : {
"check_callback" : true,
"data" : [
{ "text" : "Branch 1", "type" : "branch", "children" : [
{ "text" : "leaf 1.1", "type" : "leaf" },
{ "text" : "leaf 1.2", "type" : "leaf" },
{ "text" : "leaf 1.3", "type" : "leaf" }
]
},
{ "text" : "Branch 2", "type" : "branch", "children" : [
{ "text" : "leaf 2.1", "type" : "leaf" },
{ "text" : "leaf 2.2", "type" : "leaf" },
{ "text" : "leaf 2.3", "type" : "leaf" }
]
}
]
},
"types" : {
"#" : {
"valid_children" : ["branch"]
},
"branch" : {
"valid_children" : ["leaf"]
},
"leaf" : {
"valid_children" : []
}
},
"plugins" : ["types", "dnd", "contextmenu"]});
Also, you can override "contextmenu"
"contextmenu":{
"items": function () {
return {
"Create": {
"label": "Create",
"action": function (data) {
var ref = $.jstree.reference(data.reference);
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
type = ref.get_type(sel);
if (type == "#")
type = "branch";
else if (type == "branch")
type = "leaf";
else if (type == "leaf")
type = "";
sel = ref.create_node(sel, {text: "new "+type, type: type});
if(sel) {
ref.edit(sel);
}
}
},
"Rename": {
"label": "Rename",
"action": function (data) {
var inst = $.jstree.reference(data.reference);
obj = inst.get_node(data.reference);
inst.edit(obj);
}
},
"Delete": {
"label": "Delete",
"action": function (data) {
var ref = $.jstree.reference(data.reference),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
}
}
};
}
},
You have a problem with "types". The "Create" action in the "contextmenu" does not know about the types of "branch" and "leaf" and create new node with "type" : "default".
You can see this:
"types" : {
"#" : {
"valid_children" : ["branch", "default"]
},
"branch" : {
"valid_children" : ["leaf", "default"]
},
"leaf" : {
"valid_children" : []
}
},
//current jsfiddle
http://jsfiddle.net/0ht35rpb/45/
I am trying to loop through a json navigation tree - so that when a person goes to a particular page, it finds its alternative language counter-part.
//JSON
{
"langs" : [
{
"lang" : "de",
"lines" : {
"menu" : [
{
"title" : "Anleitung",
"link" : "/de/anleitung"
},
{
"title" : "Funktionen",
"link" : "/de/funktionen"
},
{
"title" : "Dienstleistungen",
"link" : "/de/dienstleistungen",
"children" : [
{
"title" : "Geistiges Eigentum",
"link" : "/de/dienstleistungen/geistiges-eigentum"
},
{
"title" : "Compliance",
"link" : "/de/dienstleistungen/compliance"
},
{
"title" : "Investment- und Beteiligungsrecht",
"link" : "/de/dienstleistungen/beteiligungsrecht"
},
{
"title" : "Mergers & Acquisitions",
"link" : "/de/dienstleistungen/mergers-and-acquisitions"
},
{
"title" : "Immobilienrecht",
"link" : "/de/dienstleistungen/immobilienrecht"
},
{
"title" : "Internet- und Datenschutzrecht",
"link" : "/de/dienstleistungen/internetrecht"
},
{
"title" : "Gesellschaftsrecht",
"link" : "/de/dienstleistungen/gesellschaftsrecht"
},
{
"title" : "Handelsrecht",
"link" : "/de/dienstleistungen/handelsrecht"
},
{
"title" : "Arbeitsrecht",
"link" : "/de/dienstleistungen/arbeitsrecht"
},
{
"title" : "Bankrecht",
"link" : "/de/dienstleistungen/bankrecht"
},
{
"title" : "Vertragsrecht",
"link" : "/de/dienstleistungen/vertragsrecht"
},
{
"title" : "Wettbewerbsrecht",
"link" : "/de/dienstleistungen/wettbewerbsrecht"
}
]
},
{
"title" : "Beliebte Projekte",
"link" : "/de/beliebte-projekte",
"children" : [
{
"title" : "Compliance",
"link" : "/de/beliebte-projekte/compliance",
"children" : [
{
"title" : "Haftungsrisiken für Geschäftsführern",
"link" : "/de/beliebte-projekte/compliance/haftungsrisken-geschaeftsfuehrern"
},
{
"title" : "Compliance-Prüfung KMU",
"link" : "/de/beliebte-projekte/compliance/compliance-pruefung-kmu"
}
]
}
]
}
],
"sign_in" : "Login"
}
},
{
"lang" : "en",
"lines" : {
"menu" : [
{
"title" : "How it works",
"link" : "/en/how-it-works"
},
{
"title" : "Features",
"link" : "/en/features"
},
{
"title" : "Services",
"link" : "/en/services",
"children" : [
{
"title" : "Intellectual property",
"link" : "/en/services/intellectual-property"
},
{
"title" : "Compliance",
"link" : "/en/services/compliance"
},
{
"title" : "Investment law",
"link" : "/en/services/investment-law"
},
{
"title" : "Mergers & Acquisitions",
"link" : "/en/services/mergers-and-acquisitions"
},
{
"title" : "Real estate law",
"link" : "/en/services/real-estate-law"
},
{
"title" : "Internet law and data privacy",
"link" : "/en/services/internet-law"
},
{
"title" : "Company law",
"link" : "/en/services/company-law"
},
{
"title" : "Trade law",
"link" : "/en/services/trade-law"
},
{
"title" : "Labour law",
"link" : "/en/services/labour-law"
},
{
"title" : "Bank law",
"link" : "/en/services/bank-law"
},
{
"title" : "Contract law",
"link" : "/en/services/contract-law"
},
{
"title" : "Competition law",
"link" : "/en/services/competition-law"
}
]
},
{
"title" : "Popular Projects",
"link" : "/en/popular-projects",
"children" : [
{
"title" : "Compliance",
"link" : "/en/popular-projects/compliance",
"children" : [
{
"title" : "Haf eng",
"link" : "/en/popular-projects/compliance/haf-eng"
},
{
"title" : "Compliance eng",
"link" : "/en/popular-projects/compliance/compliance-eng"
}
]
}
]
}
],
"sign_in" : "Sign in"
}
}
]
}
my js functions
so in this case
imagine
CURRENTLNG as en
CURRENTURL as /en/services
in fetchFooterUrls () - I want to return an array with ["/en/services", "/de/dienstleistungen"]
this code falls down in trying to get the 3rd level navigation counter parts
["/en/popular-projects/compliance/compliance-eng", "/de/beliebte-projekte/compliance/compliance-pruefung-kmu"]
getUrl (pairUrl, currentLng, enMenu, deMenu, obj) {
for (let k in obj) {
if (!obj.hasOwnProperty(k)) continue
if (obj[k].link === pairUrl) {
if (currentLng === 'de') {
return enMenu[k].link // get en link equivlant
} else {
return deMenu[k].link // get de link equivlant
}
} else {
if (obj[k].hasOwnProperty('children') && obj[k].children.length > 0) continue
this.getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children)
}
}
}
//
getLanguagePair (currentLng, pairUrl) {
// 'find url in json tree'
var enMenu = linkTreeObject.langs[1].lines.menu
var deMenu = linkTreeObject.langs[0].lines.menu
let obj = {}
// find position in tree
if (currentLng === 'de') {
obj = deMenu
} else {
obj = enMenu
}
return this.getUrl(pairUrl, currentLng, enMenu, deMenu, obj)
}
fetchFooterUrls () {
let deUrl = ''
let enUrl = ''
if (CURRENTLNG === 'de') {
deUrl = CURRENTURL
enUrl = this.getLanguagePair(CURRENTLNG, this.props.location.pathname)
} else {
enUrl = CURRENTURL
deUrl = this.getLanguagePair(CURRENTLNG, this.props.location.pathname)
}
return [enUrl, deUrl]
}
//tried to make this snippet - any moderators here to resolve?
var linkTreeObject ={
"langs" : [
{
"lang" : "de",
"lines" : {
"menu" : [
{
"title" : "Anleitung",
"link" : "/de/anleitung"
},
{
"title" : "Funktionen",
"link" : "/de/funktionen"
},
{
"title" : "Dienstleistungen",
"link" : "/de/dienstleistungen",
"children" : [
{
"title" : "Geistiges Eigentum",
"link" : "/de/dienstleistungen/geistiges-eigentum"
},
{
"title" : "Compliance",
"link" : "/de/dienstleistungen/compliance"
},
{
"title" : "Investment- und Beteiligungsrecht",
"link" : "/de/dienstleistungen/beteiligungsrecht"
},
{
"title" : "Mergers & Acquisitions",
"link" : "/de/dienstleistungen/mergers-and-acquisitions"
},
{
"title" : "Immobilienrecht",
"link" : "/de/dienstleistungen/immobilienrecht"
},
{
"title" : "Internet- und Datenschutzrecht",
"link" : "/de/dienstleistungen/internetrecht"
},
{
"title" : "Gesellschaftsrecht",
"link" : "/de/dienstleistungen/gesellschaftsrecht"
},
{
"title" : "Handelsrecht",
"link" : "/de/dienstleistungen/handelsrecht"
},
{
"title" : "Arbeitsrecht",
"link" : "/de/dienstleistungen/arbeitsrecht"
},
{
"title" : "Bankrecht",
"link" : "/de/dienstleistungen/bankrecht"
},
{
"title" : "Vertragsrecht",
"link" : "/de/dienstleistungen/vertragsrecht"
},
{
"title" : "Wettbewerbsrecht",
"link" : "/de/dienstleistungen/wettbewerbsrecht"
}
]
},
{
"title" : "Beliebte Projekte",
"link" : "/de/beliebte-projekte",
"children" : [
{
"title" : "Compliance",
"link" : "/de/beliebte-projekte/compliance",
"children" : [
{
"title" : "Haftungsrisiken für Geschäftsführern",
"link" : "/de/beliebte-projekte/compliance/haftungsrisken-geschaeftsfuehrern"
},
{
"title" : "Compliance-Prüfung KMU",
"link" : "/de/beliebte-projekte/compliance/compliance-pruefung-kmu"
}
]
}
]
}
],
"sign_in" : "Login"
}
},
{
"lang" : "en",
"lines" : {
"menu" : [
{
"title" : "How it works",
"link" : "/en/how-it-works"
},
{
"title" : "Features",
"link" : "/en/features"
},
{
"title" : "Services",
"link" : "/en/services",
"children" : [
{
"title" : "Intellectual property",
"link" : "/en/services/intellectual-property"
},
{
"title" : "Compliance",
"link" : "/en/services/compliance"
},
{
"title" : "Investment law",
"link" : "/en/services/investment-law"
},
{
"title" : "Mergers & Acquisitions",
"link" : "/en/services/mergers-and-acquisitions"
},
{
"title" : "Real estate law",
"link" : "/en/services/real-estate-law"
},
{
"title" : "Internet law and data privacy",
"link" : "/en/services/internet-law"
},
{
"title" : "Company law",
"link" : "/en/services/company-law"
},
{
"title" : "Trade law",
"link" : "/en/services/trade-law"
},
{
"title" : "Labour law",
"link" : "/en/services/labour-law"
},
{
"title" : "Bank law",
"link" : "/en/services/bank-law"
},
{
"title" : "Contract law",
"link" : "/en/services/contract-law"
},
{
"title" : "Competition law",
"link" : "/en/services/competition-law"
}
]
},
{
"title" : "Popular Projects",
"link" : "/en/popular-projects",
"children" : [
{
"title" : "Compliance",
"link" : "/en/popular-projects/compliance",
"children" : [
{
"title" : "Haf eng",
"link" : "/en/popular-projects/compliance/haf-eng"
},
{
"title" : "Compliance eng",
"link" : "/en/popular-projects/compliance/compliance-eng"
}
]
}
]
}
],
"sign_in" : "Sign in"
}
}
]
};
getUrl (pairUrl, currentLng, enMenu, deMenu, obj) {
for (let k in obj) {
if (!obj.hasOwnProperty(k)) continue
if (obj[k].link === pairUrl) {
if (currentLng === 'de') {
return enMenu[k].link // get en link equivlant
} else {
return deMenu[k].link // get de link equivlant
}
} else {
if (obj[k].hasOwnProperty('children') && obj[k].children.length > 0) continue
this.getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children)
}
}
}
//
getLanguagePair (currentLng, pairUrl) {
// 'find url in json tree'
var enMenu = linkTreeObject.langs[1].lines.menu
var deMenu = linkTreeObject.langs[0].lines.menu
let obj = {}
// find position in tree
if (currentLng === 'de') {
obj = deMenu
} else {
obj = enMenu
}
return this.getUrl(pairUrl, currentLng, enMenu, deMenu, obj)
}
console.log(getLanguagePair("en", "/en/how-it-works"))
Updated the jsfiddle. You had errors related to the recursive function call in the else part.
http://jsfiddle.net/gaganshera/0ht35rpb/51/
Changed it to
if (!obj[k].hasOwnProperty('children') || obj[k].children.length <= 0) continue;
var ret = getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
if(typeof ret != 'undefined') return ret;
var linkTreeObject = {
"langs": [{
"lang": "de",
"lines": {
"menu": [{
"title": "Anleitung",
"link": "/de/anleitung"
}, {
"title": "Funktionen",
"link": "/de/funktionen"
}, {
"title": "Dienstleistungen",
"link": "/de/dienstleistungen",
"children": [{
"title": "Geistiges Eigentum",
"link": "/de/dienstleistungen/geistiges-eigentum"
}, {
"title": "Compliance",
"link": "/de/dienstleistungen/compliance"
}, {
"title": "Investment- und Beteiligungsrecht",
"link": "/de/dienstleistungen/beteiligungsrecht"
}, {
"title": "Mergers & Acquisitions",
"link": "/de/dienstleistungen/mergers-and-acquisitions"
}, {
"title": "Immobilienrecht",
"link": "/de/dienstleistungen/immobilienrecht"
}, {
"title": "Internet- und Datenschutzrecht",
"link": "/de/dienstleistungen/internetrecht"
}, {
"title": "Gesellschaftsrecht",
"link": "/de/dienstleistungen/gesellschaftsrecht"
}, {
"title": "Handelsrecht",
"link": "/de/dienstleistungen/handelsrecht"
}, {
"title": "Arbeitsrecht",
"link": "/de/dienstleistungen/arbeitsrecht"
}, {
"title": "Bankrecht",
"link": "/de/dienstleistungen/bankrecht"
}, {
"title": "Vertragsrecht",
"link": "/de/dienstleistungen/vertragsrecht"
}, {
"title": "Wettbewerbsrecht",
"link": "/de/dienstleistungen/wettbewerbsrecht"
}]
}, {
"title": "Beliebte Projekte",
"link": "/de/beliebte-projekte",
"children": [{
"title": "Compliance",
"link": "/de/beliebte-projekte/compliance",
"children": [{
"title": "Haftungsrisiken für Geschäftsführern",
"link": "/de/beliebte-projekte/compliance/haftungsrisken-geschaeftsfuehrern"
}, {
"title": "Compliance-Prüfung KMU",
"link": "/de/beliebte-projekte/compliance/compliance-pruefung-kmu"
}]
}]
}],
"sign_in": "Login"
}
}, {
"lang": "en",
"lines": {
"menu": [{
"title": "How it works",
"link": "/en/how-it-works"
}, {
"title": "Features",
"link": "/en/features"
}, {
"title": "Services",
"link": "/en/services",
"children": [{
"title": "Intellectual property",
"link": "/en/services/intellectual-property"
}, {
"title": "Compliance",
"link": "/en/services/compliance"
}, {
"title": "Investment law",
"link": "/en/services/investment-law"
}, {
"title": "Mergers & Acquisitions",
"link": "/en/services/mergers-and-acquisitions"
}, {
"title": "Real estate law",
"link": "/en/services/real-estate-law"
}, {
"title": "Internet law and data privacy",
"link": "/en/services/internet-law"
}, {
"title": "Company law",
"link": "/en/services/company-law"
}, {
"title": "Trade law",
"link": "/en/services/trade-law"
}, {
"title": "Labour law",
"link": "/en/services/labour-law"
}, {
"title": "Bank law",
"link": "/en/services/bank-law"
}, {
"title": "Contract law",
"link": "/en/services/contract-law"
}, {
"title": "Competition law",
"link": "/en/services/competition-law"
}]
}, {
"title": "Popular Projects",
"link": "/en/popular-projects",
"children": [{
"title": "Compliance",
"link": "/en/popular-projects/compliance",
"children": [{
"title": "Haf eng",
"link": "/en/popular-projects/compliance/haf-eng"
}, {
"title": "Compliance eng",
"link": "/en/popular-projects/compliance/compliance-eng"
}]
}]
}],
"sign_in": "Sign in"
}
}]
};
function getUrl(pairUrl, currentLng, enMenu, deMenu, obj) {
for (let k in obj) {
if (!obj.hasOwnProperty(k)) continue
if (obj[k].link === pairUrl) {
if (currentLng === 'de') {
return enMenu[k].link // get en link equivlant
} else {
return deMenu[k].link // get de link equivlant
}
} else {
if (!obj[k].hasOwnProperty('children') || obj[k].children.length <= 0) continue;
var ret = getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
if(typeof ret != 'undefined') return ret;
}
}
}
function getLanguagePair(currentLng, pairUrl) {
// 'find url in json tree'
var enMenu = linkTreeObject.langs[1].lines.menu
var deMenu = linkTreeObject.langs[0].lines.menu
let obj = {}
// find position in tree
if (currentLng === 'de') {
obj = deMenu
} else {
obj = enMenu
}
return getUrl(pairUrl, currentLng, enMenu, deMenu, obj)
}
//works
console.log(getLanguagePair("en", "/en/how-it-works"))
console.log(getLanguagePair("en", "/en/popular-projects"))
console.log(getLanguagePair("de", "/de/anleitung"))
console.log(getLanguagePair("de", "/de/beliebte-projekte"))
//fail
console.log(getLanguagePair("en", "/en/services/compliance"))
console.log(getLanguagePair("en", "/en/popular-projects/compliance"))
console.log(getLanguagePair("en", "/en/popular-projects/compliance/compliance-eng"))
there is a problem in your recursive function. If you don't match the url at the first function call, you recursively call the function again but you don't return it.
function get_10_recursive(number){
if(number>=10) return 10;
else return get_10_recursive(number++);
}
In this example, if the number is smaller than 10, the function is recursively called until it encounter a return statement, after this, it retrace the stack and returns you the correct result. If you remove the return statement in the third line the code is executed as well but it returns the result only of the first call, which is undefined.
The problem in your code is that, if you place a return inside the for loop, the loop gets interrupted and you won't check the next strings, so you have to store the results of the function call in a temporary variable and return it only if it's truthy (aka it's not undefined).
Your getUrl function becomes like this:
function getUrl(pairUrl, currentLng, enMenu, deMenu, obj) {
for (var k in obj) {
if (obj[k].link === pairUrl) {
if (currentLng === 'de') {
return enMenu[k].link; // get en link equivlant
} else {
return deMenu[k].link; // get de link equivlant
}
} else {
if (obj[k].hasOwnProperty('children')){
var tmp = getUrl(pairUrl, currentLng, enMenu[k].children, deMenu[k].children, obj[k].children);
if(tmp) return tmp; // check if it found the match successfully
}
}
}
}
PS: I remvoed the if (!obj.hasOwnProperty(k)) continue because it was useless
I am working on a d3 project at the moment, and I am trying to map out a hierachical tree to show people and who they are responsible for. Basically I can user A and user B and they can each be responsible for the same person.
Currently to highlight this in my JSON data that builds the visualisation I am repeating data, is there away to not repeat data and use the same data point when 2 or more people are responsible for the same person?
Here is my JSfiddle example
My Hierachical Visualisation
You will see here that, Raymond Reddington & Donald Ressler have cross over between some of their responsibilites, I am repeating the data which seems inefficient, is there a better way, here is my JSON.
[
{
"name" : "Company Name",
"parent" : null,
"children": [
{
"name" : "Raymond Reddington",
"parent" : "Cherry Tree Lodge",
"children" : [
{
"name" : "Debe Zuma",
"parent" : "Raymond Reddington",
},
{
"name" : "Tom Keen",
"parent" : "Raymond Reddington",
},
{
"name" : "Aram Mojtabai",
"parent" : "Raymond Reddington",
}
]
},
{
"name" : "Elizabeth Keen",
"parent" : "Cherry Tree Lodge",
"children" : [
{
"name" : "Samar Navabi",
"parent" : "Elizabeth Keen",
},
{
"name" : "Meera Malik",
"parent" : "Elizabeth Keen",
},
{
"name" : "Mr. Kaplan",
"parent" : "Elizabeth Keen",
},
{
"name" : "Reven Wright",
"parent" : "Elizabeth Keen",
}
]
},
{
"name" : "Donald Ressler",
"parent" : "Cherry Tree Lodge",
"children" : [
{
"name" : "Matius Solomon",
"parent" : "Donald Ressler",
"size" : 3938
},
{
"name" : "Peter Kotsiopulos",
"parent" : "Donal Ressler",
"size" : 3938
},
{
"name" : "Tom Keen",
"parent" : "Raymond Reddington",
"size" : 3938
},
{
"name" : "Aram Mojtabai",
"parent" : "Raymond Reddington",
"size" : 3938
}
]
},
{
"name" : "Harold Cooper",
"parent" : "Cherry Tree Lodge",
"children" : [
{
"name" : "Samar Navabi",
"parent" : "Elizabeth Keen",
"size" : 3938
},
{
"name" : "Meera Malik",
"parent" : "Elizabeth Keen",
"size" : 3938
}
]
}
]
}
]
This website details a method of converting flat data to the hierarchical data required by d3 http://www.d3noob.org/2014/01/tree-diagrams-in-d3js_11.html
They explain it well too. As the author notes it is originally based on https://stackoverflow.com/a/17849353/1544886
I have copied and pasted their website's example below:
var data = [
{ "name" : "Level 2: A", "parent":"Top Level" },
{ "name" : "Top Level", "parent":"null" },
{ "name" : "Son of A", "parent":"Level 2: A" },
{ "name" : "Daughter of A", "parent":"Level 2: A" },
{ "name" : "Level 2: B", "parent":"Top Level" }
];
will map to:
var treeData = [
{
"name": "Top Level",
"parent": "null",
"children": [
{
"name": "Level 2: A",
"parent": "Top Level",
"children": [
{
"name": "Son of A",
"parent": "Level 2: A"
},
{
"name": "Daughter of A",
"parent": "Level 2: A"
}
]
},
{
"name": "Level 2: B",
"parent": "Top Level"
}
]
}
];
via:
var dataMap = data.reduce(function(map, node) {
map[node.name] = node;
return map;
}, {});
var treeData = [];
data.forEach(function(node) {
// add to parent
var parent = dataMap[node.parent];
if (parent) {
// create child array if it doesn't exist
(parent.children || (parent.children = []))
// add node to child array
.push(node);
} else {
// parent is null or missing
treeData.push(node);
}
});
You could extend that further replacing with Ids and using a second normalised array for the lookup:
[{
"id": 0,
"name": "Cherry Tree Lodge"
},{
"id": 1,
"name": "Tom Keen"
},{
"id": 2,
"name": "Debe Zuma"
}]
Also please note that your json data is not strictly valid, you have extra commas.
I am trying to access an image in a JSON response however the field I need to access is an id value that is unique or rather is random. We are fetching this data from a server so we cannot hard code the id's.
The JSON is as follows:
{ "error" : { "occured" : "false" },
"errors" : [ ],
"executiontime" : 2500,
"metadata" : { },
"value" : [ { "activity_duration" : "1 hour, ½ day & full day packages",
"adult_rate_high_period_high_price" : 275,
"adult_rate_high_period_low_price" : 49,
"adult_rate_low_period_high_price" : "",
"adult_rate_low_period_low_price" : "",
"amenities" : [ ],
"assets" : { "logo" : { "436209" : { "asset_type" : "image",
"caption" : "",
"credit" : "",
"description" : "",
"exists" : "true",
"height" : 82,
"label" : "Copy of Monarch logo",
"latitude" : 0,
"longitude" : 0,
"market" : "$",
"o_id" : 3221685,
"type_o_id" : 2543991,
"unique_id" : 436209,
"url" : "http://c0481729.cdn2.cloudfiles.rackspacecloud.com/p-DD951E3E-C7AF-F22C-77E98D299833B38F-2544001.jpg",
"width" : 220
} },
We are trying to display the business logo for each amenity. To do this I need to access the url field in the above JSON. How do I access the url field under assest.
The Problem is to get the id of the Logo 436209.
var theid;
var l = obj.value[0].assets.logo
for (var p in l) {
if (l[p].hasOwnProperty('unique_id')) {
theid = l[p].unique_id;
break;
}
}
This is untestet. The idee is to use the in-operator to iterate over the properties of the logo-object and get the propterty that has the unique_id.
Correction:
obj.value[0].assets.logo["436209"].url = 'foo';
// or
var foo = obj.value[0].assets.logo["436209"].url;
This assumes that your object is well formed and continues with more parts of obj.value[0].
Specifically, if your object were completed, perhaps, like this:
var obj = {
"error": { "occured": "false" },
"errors": [],
"executiontime": 2500,
"metadata": {},
"value": [{
"activity_duration": "1 hour, ½ day & full day packages",
"adult_rate_high_period_high_price": 275,
"adult_rate_high_period_low_price": 49,
"adult_rate_low_period_high_price": "",
"adult_rate_low_period_low_price": "",
"amenities": [],
"assets": {
"logo": {
"436209": {
"asset_type": "image",
"caption": "",
"credit": "",
"description": "",
"exists": "true",
"height": 82,
"label": "Copy of Monarch logo",
"latitude": 0,
"longitude": 0,
"market": "$",
"o_id": 3221685,
"type_o_id": 2543991,
"unique_id": 436209,
"url": "http://c0481729.cdn2.cloudfiles.rackspacecloud.com/p-DD951E3E-C7AF-F22C-77E98D299833B38F-2544001.jpg",
"width": 220
}
}
}
}]
};