Is there a D3 similar to the GoJS State Chart? - javascript

For my use case I want something close to this.
https://gojs.net/latest/samples/stateChart.html
I have nodes in a list of ids & relationship in form of a list of to & from and relationship name.
The example is a perfect fit but sadly it is in goJs,
Is there a ready-made something similar to this in D3? or any other free to use libraries I can leverage on?
Here is the data from the goJs example, I have similar data.
{ "nodeKeyProperty": "id",
"nodeDataArray": [
{ "id": 0, "loc": "120 120", "text": "Initial" },
{ "id": 1, "loc": "330 120", "text": "First down" },
{ "id": 2, "loc": "226 376", "text": "First up" },
{ "id": 3, "loc": "60 276", "text": "Second down" },
{ "id": 4, "loc": "226 226", "text": "Wait" }
],
"linkDataArray": [
{ "from": 0, "to": 0, "text": "up or timer", "curviness": -20 },
{ "from": 0, "to": 1, "text": "down", "curviness": 20 },
{ "from": 1, "to": 0, "text": "up (moved)\nPOST", "curviness": 20 },
{ "from": 1, "to": 1, "text": "down", "curviness": -20 },
{ "from": 1, "to": 2, "text": "up (no move)" },
{ "from": 1, "to": 4, "text": "timer" },
{ "from": 2, "to": 0, "text": "timer\nPOST" },
{ "from": 2, "to": 3, "text": "down" },
{ "from": 3, "to": 0, "text": "up\nPOST\n(dblclick\nif no move)" },
{ "from": 3, "to": 3, "text": "down or timer", "curviness": 20 },
{ "from": 4, "to": 0, "text": "up\nPOST" },
{ "from": 4, "to": 4, "text": "down" }
]
}

Related

How to convert hierarchical tree JSON to flat array using Node.js?

I am trying to create a report like given below with Node.js. The data is consumed from Microstrategy API.
Below is the JSON response I am getting from Microstrategy
{
"id": "12DC624040860B5401F516A2341D95C8",
"name": "Sales Report_AB.xlsx",
"instanceId": "A7900B0A4AD840FF327F04897A9DB4E3",
"result": {
"definition": {
"attributes": [
{
"name": "Branch Channel",
"id": "B449BEE543721EEB57501BBC1EDD1B3D",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
},
{
"name": "Branch City State",
"id": "2DF6E4204460A79BE3A86BA9F1FE9552",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
},
{
"name": "Client Full Name",
"id": "61460DC345A8EFDCCBCFB9AB0D3FEFAB",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
},
{
"name": "Firm",
"id": "145C2A3E45C369BEA82B9BA3C6CA68BF",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
},
{
"name": "Product Group",
"id": "5429196C44F9A365F0904DB2733C0209",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
},
{
"name": "Regional Manager (RM) MF",
"id": "DE85E29F45158ED9C5B35082B399A22E",
"type": "Attribute",
"forms": [
{
"id": "45C11FA478E745FEA08D781CEA190FE5",
"name": "ID",
"dataType": "Char"
}
]
}
],
"metrics": [
{
"name": "Branch Rank",
"id": "975BE0ED4174AA52C0AF97A96D64CE7B",
"type": "Metric",
"min": 4,
"max": 103,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
},
{
"name": "MF & SMA Current AUM",
"id": "33B375744FA4A91B86A87D9FE4EEE718",
"type": "Metric",
"min": 145865.48,
"max": 10530391.47,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
},
{
"name": "MF & SMA Today Sales",
"id": "82F9DD1D4F6AC5EBA77D918D0541B9AD",
"type": "Metric",
"min": 15.34,
"max": 1315.91,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
},
{
"name": "MF & SMA Pr. Month Sales",
"id": "3890BF0C4553300D5467A7A871C66F76",
"type": "Metric",
"min": 388.56,
"max": 60365.82,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
},
{
"name": "RET Today Sales",
"id": "99DC7CD344B5B5C6DD337989077BC478",
"type": "Metric",
"min": 15.34,
"max": 1315.91,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
},
{
"name": "RET Current AUM",
"id": "981FE7E34CE4D6C3543B2B8E0367ECAA",
"type": "Metric",
"min": 46170.04,
"max": 3172313.93,
"numberFormatting": {
"category": 7,
"decimalPlaces": 0,
"formatString": "#,##0;\"(\"#,##0\")\""
}
}
],
"thresholds": []
},
"data": {
"paging": {
"total": 5,
"current": 5,
"offset": 0,
"limit": 1000,
"prev": null,
"next": null
},
"root": {
"isPartial": false,
"children": [
{
"depth": 0,
"element": {
"attributeIndex": 0,
"formValues": {
"ID": "Broker Dealer"
},
"name": "Broker Dealer",
"id": "hBroker Dealer;B449BEE543721EEB57501BBC1EDD1B3D"
},
"isPartial": false,
"children": [
{
"depth": 1,
"element": {
"attributeIndex": 1,
"formValues": {
"ID": "BILLINGS"
},
"name": "BILLINGS",
"id": "hBILLINGS;2DF6E4204460A79BE3A86BA9F1FE9552"
},
"isPartial": false,
"children": [
{
"depth": 2,
"element": {
"attributeIndex": 2,
"formValues": {
"ID": "TODD H VRALSTED"
},
"name": "TODD H VRALSTED",
"id": "hTODD H VRALSTED;61460DC345A8EFDCCBCFB9AB0D3FEFAB"
},
"isPartial": false,
"children": [
{
"depth": 3,
"element": {
"attributeIndex": 3,
"formValues": {
"ID": "UBS FINANCIAL SERVICES INC."
},
"name": "UBS FINANCIAL SERVICES INC.",
"id": "hUBS FINANCIAL SERVICES INC.;145C2A3E45C369BEA82B9BA3C6CA68BF"
},
"isPartial": false,
"children": [
{
"depth": 4,
"element": {
"attributeIndex": 4,
"formValues": {
"ID": "GLOBAL BOND"
},
"name": "GLOBAL BOND",
"id": "hGLOBAL BOND;5429196C44F9A365F0904DB2733C0209"
},
"isPartial": false,
"children": [
{
"depth": 5,
"element": {
"attributeIndex": 5,
"formValues": {
"ID": "Doss Steve"
},
"name": "Doss Steve",
"id": "hDoss Steve;DE85E29F45158ED9C5B35082B399A22E"
},
"metrics": {
"Branch Rank": {
"rv": 4,
"fv": "4",
"mi": 0
},
"MF & SMA Current AUM": {
"rv": 567490.58,
"fv": "567,491",
"mi": 1
},
"MF & SMA Today Sales": {
"rv": 15.34,
"fv": "15",
"mi": 2
},
"MF & SMA Pr. Month Sales": {
"rv": 388.56,
"fv": "389",
"mi": 3
},
"RET Today Sales": {
"rv": 15.34,
"fv": "15",
"mi": 4
},
"RET Current AUM": {
"rv": 46170.04,
"fv": "46,170",
"mi": 5
}
}
}
]
},
{
"depth": 4,
"element": {
"attributeIndex": 4,
"formValues": {
"ID": "LARGE CAP GROWTH"
},
"name": "LARGE CAP GROWTH",
"id": "hLARGE CAP GROWTH;5429196C44F9A365F0904DB2733C0209"
},
"isPartial": false,
"children": [
{
"depth": 5,
"element": {
"attributeIndex": 5,
"formValues": {
"ID": "Doss Steve"
},
"name": "Doss Steve",
"id": "hDoss Steve;DE85E29F45158ED9C5B35082B399A22E"
},
"metrics": {
"Branch Rank": {
"rv": 4,
"fv": "4",
"mi": 0
},
"MF & SMA Current AUM": {
"rv": 10530391.47,
"fv": "10,530,391",
"mi": 1
},
"MF & SMA Today Sales": {
"rv": 763.74,
"fv": "764",
"mi": 2
},
"MF & SMA Pr. Month Sales": {
"rv": 60365.82,
"fv": "60,366",
"mi": 3
},
"RET Today Sales": {
"rv": 763.74,
"fv": "764",
"mi": 4
},
"RET Current AUM": {
"rv": 3172313.93,
"fv": "3,172,314",
"mi": 5
}
}
}
]
}
]
}
]
}
]
},
{
"depth": 1,
"element": {
"attributeIndex": 1,
"formValues": {
"ID": "BOULDER"
},
"name": "BOULDER",
"id": "hBOULDER;2DF6E4204460A79BE3A86BA9F1FE9552"
},
"isPartial": false,
"children": [
{
"depth": 2,
"element": {
"attributeIndex": 2,
"formValues": {
"ID": "RORY D LINDQUIST"
},
"name": "RORY D LINDQUIST",
"id": "hRORY D LINDQUIST;61460DC345A8EFDCCBCFB9AB0D3FEFAB"
},
"isPartial": false,
"children": [
{
"depth": 3,
"element": {
"attributeIndex": 3,
"formValues": {
"ID": "MORGAN STANLEY SMITH BARNEY LLC"
},
"name": "MORGAN STANLEY SMITH BARNEY LLC",
"id": "hMORGAN STANLEY SMITH BARNEY LLC;145C2A3E45C369BEA82B9BA3C6CA68BF"
},
"isPartial": false,
"children": [
{
"depth": 4,
"element": {
"attributeIndex": 4,
"formValues": {
"ID": "SMALL CAP GROWTH"
},
"name": "SMALL CAP GROWTH",
"id": "hSMALL CAP GROWTH;5429196C44F9A365F0904DB2733C0209"
},
"isPartial": false,
"children": [
{
"depth": 5,
"element": {
"attributeIndex": 5,
"formValues": {
"ID": "Doss Steve"
},
"name": "Doss Steve",
"id": "hDoss Steve;DE85E29F45158ED9C5B35082B399A22E"
},
"metrics": {
"Branch Rank": {
"rv": 103,
"fv": "103",
"mi": 0
},
"MF & SMA Current AUM": {
"rv": 339671.74,
"fv": "339,672",
"mi": 1
},
"MF & SMA Today Sales": {
"rv": 1315.91,
"fv": "1,316",
"mi": 2
},
"MF & SMA Pr. Month Sales": {
"rv": 3571.37,
"fv": "3,571",
"mi": 3
},
"RET Today Sales": {
"rv": 1315.91,
"fv": "1,316",
"mi": 4
},
"RET Current AUM": {
"rv": 339671.74,
"fv": "339,672",
"mi": 5
}
}
}
]
}
]
}
]
}
]
}
]
},
{
"depth": 0,
"element": {
"attributeIndex": 0,
"formValues": {
"ID": "Financial Advisor"
},
"name": "Financial Advisor",
"id": "hFinancial Advisor;B449BEE543721EEB57501BBC1EDD1B3D"
},
"isPartial": false,
"children": [
{
"depth": 1,
"element": {
"attributeIndex": 1,
"formValues": {
"ID": "DENVER"
},
"name": "DENVER",
"id": "hDENVER;2DF6E4204460A79BE3A86BA9F1FE9552"
},
"isPartial": false,
"children": [
{
"depth": 2,
"element": {
"attributeIndex": 2,
"formValues": {
"ID": "CHAD J LARSEN"
},
"name": "CHAD J LARSEN",
"id": "hCHAD J LARSEN;61460DC345A8EFDCCBCFB9AB0D3FEFAB"
},
"isPartial": false,
"children": [
{
"depth": 3,
"element": {
"attributeIndex": 3,
"formValues": {
"ID": "LPL FINANCIAL LLC"
},
"name": "LPL FINANCIAL LLC",
"id": "hLPL FINANCIAL LLC;145C2A3E45C369BEA82B9BA3C6CA68BF"
},
"isPartial": false,
"children": [
{
"depth": 4,
"element": {
"attributeIndex": 4,
"formValues": {
"ID": "SMALL CAP GROWTH"
},
"name": "SMALL CAP GROWTH",
"id": "hSMALL CAP GROWTH;5429196C44F9A365F0904DB2733C0209"
},
"isPartial": false,
"children": [
{
"depth": 5,
"element": {
"attributeIndex": 5,
"formValues": {
"ID": "Doss Steve"
},
"name": "Doss Steve",
"id": "hDoss Steve;DE85E29F45158ED9C5B35082B399A22E"
},
"metrics": {
"Branch Rank": {
"rv": 101,
"fv": "101",
"mi": 0
},
"MF & SMA Current AUM": {
"rv": 145865.48,
"fv": "145,865",
"mi": 1
},
"MF & SMA Today Sales": {
"rv": 322.84,
"fv": "323",
"mi": 2
},
"MF & SMA Pr. Month Sales": {
"rv": 1507.62,
"fv": "1,508",
"mi": 3
},
"RET Today Sales": {
"rv": 322.84,
"fv": "323",
"mi": 4
},
"RET Current AUM": {
"rv": 145865.48,
"fv": "145,865",
"mi": 5
}
}
}
]
}
]
}
]
},
{
"depth": 2,
"element": {
"attributeIndex": 2,
"formValues": {
"ID": "PATTERSON J MCKINLAY"
},
"name": "PATTERSON J MCKINLAY",
"id": "hPATTERSON J MCKINLAY;61460DC345A8EFDCCBCFB9AB0D3FEFAB"
},
"isPartial": false,
"children": [
{
"depth": 3,
"element": {
"attributeIndex": 3,
"formValues": {
"ID": "LPL FINANCIAL LLC"
},
"name": "LPL FINANCIAL LLC",
"id": "hLPL FINANCIAL LLC;145C2A3E45C369BEA82B9BA3C6CA68BF"
},
"isPartial": false,
"children": [
{
"depth": 4,
"element": {
"attributeIndex": 4,
"formValues": {
"ID": "HIGH INCOME"
},
"name": "HIGH INCOME",
"id": "hHIGH INCOME;5429196C44F9A365F0904DB2733C0209"
},
"isPartial": false,
"children": [
{
"depth": 5,
"element": {
"attributeIndex": 5,
"formValues": {
"ID": "Doss Steve"
},
"name": "Doss Steve",
"id": "hDoss Steve;DE85E29F45158ED9C5B35082B399A22E"
},
"metrics": {
"Branch Rank": {
"rv": 80,
"fv": "80",
"mi": 0
},
"MF & SMA Current AUM": {
"rv": 1545251.85,
"fv": "1,545,252",
"mi": 1
},
"MF & SMA Today Sales": {
"rv": 662.46,
"fv": "662",
"mi": 2
},
"MF & SMA Pr. Month Sales": {
"rv": 50635.32,
"fv": "50,635",
"mi": 3
},
"RET Today Sales": {
"rv": 662.46,
"fv": "662",
"mi": 4
},
"RET Current AUM": {
"rv": 1545251.85,
"fv": "1,545,252",
"mi": 5
}
}
}
]
}
]
}
]
}
]
}
]
}
]
}
}
}
}
The data is kind of a tree structure and I can vary from report to report, i.e. the number of sub-nodes and subcategories can change. So I need a dynamic code to build the same. I have tried something from my end and I am not able to build it in the way I want. Below is my code
var result = { "records": [] };
var res = test(records.result.data.root.children, result,[], 0);
console.log(res);
function test(records, result,items, index) {
_.forEach(records, function (value, key) {
items.push({"depth":value.depth,"name":value.element.name});
result.records[index] = items;
if(typeof value.children != "undefined") {
if(value.children.lenth > 1) {
index++;
}
test(value.children,result, items,index);
} else {
if(typeof value.metrics !== "undefined") {
_.forEach(value.metrics, function (v, k) {
items.push({mkey:k,mval:v.fv});
result.records[index] = items;
});
}
}
index++;
items = [];
});
return result;
}
The above code is using Lodash for array operations.

I'm not sure what exactly you want to collect to a flat array so I'm going to show you a general way how you can recursively traverse a node tree and collect all the nodes from it to an array.
Later you can do .filter, .map, etc. on the result to get any data you want.
function collectNodes(rootNode) {
const nodes = []
function visitNode(node) {
nodes.push(node)
if (node.children) {
node.children.forEach(visitNode)
}
}
visitNode(rootNode)
return nodes
}
const nodes = collectNodes(json.result.data.root)

How to find all unique paths in tree structure

root1
child1
child2
grandchild1
grandchild2
child3
root2
child1
child2
grandchild1
greatgrandchild1
I have an object array like tree structure like above, I want to get all unique paths in like this
Food->Dry Food Items->Local Dry Food Items
Food->Dry Food Items->Thai Dry Food Items
Food->Dry Food Items->Others
Food->Fruits
------
------
This is my object
[
{
"id": 1,
"name": "Food",
"parent_id": 0,
"children": [
{
"id": 5,
"name": "Dry Food Items",
"parent_id": 1,
"children": [
{
"id": 11,
"name": "Local Dry Food Items",
"parent_id": 5
},
{
"id": 12,
"name": "Thai Dry Food Items",
"parent_id": 5
},
{
"id": 60,
"name": "Others",
"parent_id": 5
}
]
},
{
"id": 6,
"name": "Fruits",
"parent_id": 1
},
{
"id": 7,
"name": "LG Branded",
"parent_id": 1
},
{
"id": 8,
"name": "Meat",
"parent_id": 1
},
{
"id": 9,
"name": "Sea food",
"parent_id": 1
},
{
"id": 10,
"name": "Vegetables",
"parent_id": 1,
"children": [
{
"id": 14,
"name": "Local Vegetables",
"parent_id": 10
},
{
"id": 15,
"name": "Thai Vegetables",
"parent_id": 10
}
]
},
{
"id": 38,
"name": "Frozen",
"parent_id": 1
},
{
"id": 39,
"name": "IP Kitchen",
"parent_id": 1,
"children": [
{
"id": 40,
"name": "IP Meat",
"parent_id": 39
},
{
"id": 41,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 42,
"name": "IP Ingredients",
"parent_id": 39
},
{
"id": 43,
"name": "IP Sauce",
"parent_id": 39
},
{
"id": 44,
"name": "IP Seafood",
"parent_id": 39
},
{
"id": 45,
"name": "IP Starter",
"parent_id": 39
},
{
"id": 46,
"name": "IP Desert",
"parent_id": 39
}
]
}
]
},
{
"id": 2,
"name": "Beverage",
"parent_id": 0,
"children": [
{
"id": 16,
"name": "Bar",
"parent_id": 2
},
{
"id": 17,
"name": "Coffee & Tea",
"parent_id": 2
},
{
"id": 18,
"name": "In Can",
"parent_id": 2
},
{
"id": 19,
"name": "Water",
"parent_id": 2
},
{
"id": 47,
"name": "IP Bar",
"parent_id": 2
}
]
},
{
"id": 3,
"name": "Disposable",
"parent_id": 0,
"children": [
{
"id": 21,
"name": "Disposable",
"parent_id": 3
}
]
},
{
"id": 4,
"name": "SOE",
"parent_id": 0,
"children": [
{
"id": 20,
"name": "Cleaning Materials",
"parent_id": 4
},
{
"id": 22,
"name": "Chinaware",
"parent_id": 4
}
]
}
];
I get to all the nodes in the tree
function traverse(categories) {
categories.forEach(function (category) {
if (category.children && category.children.length) {
traverse(category.children);
}
else {
}
}, this);
}

You can use recursion and create a function using forEach loop.
var arr = [{"id":1,"name":"Food","parent_id":0,"children":[{"id":5,"name":"Dry Food Items","parent_id":1,"children":[{"id":11,"name":"Local Dry Food Items","parent_id":5},{"id":12,"name":"Thai Dry Food Items","parent_id":5},{"id":60,"name":"Others","parent_id":5}]},{"id":6,"name":"Fruits","parent_id":1},{"id":7,"name":"LG Branded","parent_id":1},{"id":8,"name":"Meat","parent_id":1},{"id":9,"name":"Sea food","parent_id":1},{"id":10,"name":"Vegetables","parent_id":1,"children":[{"id":14,"name":"Local Vegetables","parent_id":10},{"id":15,"name":"Thai Vegetables","parent_id":10}]},{"id":38,"name":"Frozen","parent_id":1},{"id":39,"name":"IP Kitchen","parent_id":1,"children":[{"id":40,"name":"IP Meat","parent_id":39},{"id":41,"name":"IP Starter","parent_id":39},{"id":42,"name":"IP Ingredients","parent_id":39},{"id":43,"name":"IP Sauce","parent_id":39},{"id":44,"name":"IP Seafood","parent_id":39},{"id":45,"name":"IP Starter","parent_id":39},{"id":46,"name":"IP Desert","parent_id":39}]}]},{"id":2,"name":"Beverage","parent_id":0,"children":[{"id":16,"name":"Bar","parent_id":2},{"id":17,"name":"Coffee & Tea","parent_id":2},{"id":18,"name":"In Can","parent_id":2},{"id":19,"name":"Water","parent_id":2},{"id":47,"name":"IP Bar","parent_id":2}]},{"id":3,"name":"Disposable","parent_id":0,"children":[{"id":21,"name":"Disposable","parent_id":3}]},{"id":4,"name":"SOE","parent_id":0,"children":[{"id":20,"name":"Cleaning Materials","parent_id":4},{"id":22,"name":"Chinaware","parent_id":4}]}]
function getNames(data) {
var result = [];
function loop(data, c) {
data.forEach(function (e) {
var name = !c.length ? e.name : c + '->' + e.name;
if (e.children) { loop(e.children, name); }
else {
result.push({ name: name });
}
});
}
loop(data, '');
return result;
}
console.log(getNames(arr))

Search for related properties in the same object. Javascript

I need help with matching childrens in the same object based on parent ID property....
JSON:
{
"1": {
"id": 1,
"name": "My Crib",
"type": "Home",
"order": 0,
"parent": null
},
"2": {
"id": 2,
"name": "First floor",
"type": "Floor",
"order": 1,
"parent": {
"id": 1,
"url": "http://localhost:8080/rest/areas/1"
}
},
"3": {
"id": 3,
"name": "Garage",
"type": "Garage",
"order": 2,
"parent": {
"id": 1,
"url": "http://localhost:8080/rest/areas/1"
}
},
"4": {
"id": 4,
"name": "Garden",
"type": "Garden",
"order": 3,
"parent": {
"id": 1,
"url": "http://localhost:8080/rest/areas/1"
}
},
"5": {
"id": 5,
"name": "Entrance hall",
"type": "Entrance",
"order": 1,
"parent": {
"id": 2,
"url": "http://localhost:8080/rest/areas/2"
}
},
"6": {
"id": 6,
"name": "Kitchen",
"type": "Kitchen",
"order": 2,
"parent": {
"id": 2,
"url": "http://localhost:8080/rest/areas/2"
}
},
"7": {
"id": 7,
"name": "Living room",
"type": "LivingRoom",
"order": 3,
"parent": {
"id": 2,
"url": "http://localhost:8080/rest/areas/2"
}
},
"8": {
"id": 8,
"name": "Dog house",
"type": "DogHouse",
"order": 1,
"parent": {
"id": 4,
"url": "http://localhost:8080/rest/areas/4"
}
}
}
const mappedAreas = Object.keys(areas).map(function(key) {
const area = areas[key];
const wrappers = statics["test.area.groups"]["wrappers"];
const leafs = statics["test.area.groups"]["leafs"];
if (wrappers.indexOf(area["type"]) > -1) {
//In the array!
//If not a home
if(area["type"] != "Home"){
console.log("floor:")
console.log(area)
//get wrapper childrens
const children = Object.keys(areas).map(function(key) {
const child = areas[key];
if(child["type"] != "Home"){
if(child["parent"]["id"] == area["id"] && leafs.indexOf(child["type"]) > -1){
console.log(child);
//return <Area key={"area_index_"+key} areaData={area} />
}
}
});
console.log("endfloor/")
//return <Area key={"area_index_"+key} areaData={area} />
}
} else {
//Not in the array
}
});
Is there any way to do this better than having one map inside another map?
Basicly I get all areas in one object, and I want to match them with eachother, looking for ["parent"]["id"] to match with ["id"].
Tell me if you need more description.

How can i get the total count id of this collection using javascript?

I have this collection: https://graph.facebook.com/2playcz/albums
This collection contains 8 id. How can i get the total count id of this collection using javascript? (Total = 8)
Source:
{
"data": [
{
"id": "201936779932071",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tr\u00e9ninky",
"link": "https://www.facebook.com/album.php?fbid=201936779932071&id=190320081093741&aid=41883",
"cover_photo": "201937046598711",
"count": 8,
"type": "normal",
"created_time": "2012-07-02T09:33:43+0000",
"updated_time": "2012-09-15T12:05:44+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "1788805921",
"name": "Edita Nov\u00e1"
},
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/201936779932071/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "205206429605106",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Turnaje a akce",
"link": "https://www.facebook.com/album.php?fbid=205206429605106&id=190320081093741&aid=42900",
"cover_photo": "205208716271544",
"count": 14,
"type": "normal",
"created_time": "2012-07-10T19:36:53+0000",
"updated_time": "2012-09-15T12:04:05+0000",
"can_upload": false
},
{
"id": "221784994613916",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Tenisova \u0161kolka 2play",
"description": "Tenisov\u00e1 \u0161kolka 2play",
"link": "https://www.facebook.com/album.php?fbid=221784994613916&id=190320081093741&aid=49379",
"cover_photo": "221785024613913",
"count": 9,
"type": "normal",
"created_time": "2012-08-31T11:19:59+0000",
"updated_time": "2012-09-14T15:17:53+0000",
"can_upload": false
},
{
"id": "203405996451816",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Webov\u00e9 fotografie - Logo",
"link": "https://www.facebook.com/album.php?fbid=203405996451816&id=190320081093741&aid=42285",
"cover_photo": "203406586451757",
"count": 11,
"type": "normal",
"created_time": "2012-07-05T10:12:40+0000",
"updated_time": "2012-09-14T15:16:40+0000",
"can_upload": false
},
{
"id": "190332361092513",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Cover Photos",
"link": "https://www.facebook.com/album.php?fbid=190332361092513&id=190320081093741&aid=39232",
"cover_photo": "225939404198475",
"count": 2,
"type": "normal",
"created_time": "2012-06-09T13:52:38+0000",
"updated_time": "2012-09-12T18:15:51+0000",
"can_upload": false
},
{
"id": "190802884378794",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Wall Photos",
"link": "https://www.facebook.com/album.php?fbid=190802884378794&id=190320081093741&aid=39324",
"cover_photo": "190802891045460",
"count": 2,
"type": "wall",
"created_time": "2012-06-10T13:19:48+0000",
"updated_time": "2012-07-17T17:16:19+0000",
"can_upload": false
},
{
"id": "205207126271703",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Ostatn\u00ed",
"link": "https://www.facebook.com/album.php?fbid=205207126271703&id=190320081093741&aid=42902",
"cover_photo": "205209679604781",
"count": 4,
"type": "normal",
"created_time": "2012-07-10T19:40:05+0000",
"updated_time": "2012-07-16T14:47:16+0000",
"can_upload": false,
"likes": {
"data": [
{
"id": "100001449904219",
"name": "Mirka Brani\u0161ov\u00e1"
}
],
"paging": {
"next": "https://graph.facebook.com/205207126271703/likes?limit=25&offset=25&__after_id=100001449904219"
}
}
},
{
"id": "190320914426991",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Profile Pictures",
"link": "https://www.facebook.com/album.php?fbid=190320914426991&id=190320081093741&aid=39224",
"cover_photo": "190327474426335",
"count": 1,
"type": "profile",
"created_time": "2012-06-09T13:29:16+0000",
"updated_time": "2012-06-09T13:43:08+0000",
"can_upload": false
},
{
"id": "190322704426812",
"from": {
"name": "2play.cz - Tenisov\u00e1 \u0161kola",
"category": "Sports league",
"id": "190320081093741"
},
"name": "Logo",
"description": "Loga spole\u010dnosti",
"link": "https://www.facebook.com/album.php?fbid=190322704426812&id=190320081093741&aid=39225",
"type": "normal",
"created_time": "2012-06-09T13:34:09+0000",
"updated_time": "2012-07-05T10:16:58+0000",
"can_upload": false
}
]
}

If you mean the count of items in the data array, it would just be data.length.

First of all, there 9 ids. If you want to count the number of elements in array there's a built-in property length. So that if your object is called x you retrieve the length of data by accessing x.data.length.
On the other hand, if you wanted to count the number of unique ids (IDs should by unique anyway, but if you really really wanted to) you have to manually iterate through the array and count them:
var countIds = function (arr) {
var uniqueIds = {}, num = 0;
if (!arr.data) return false;
arr.data.forEach(function (val, i) {
if (typeof uniqueIds[val.id] === "undefined") {
++num;
uniqueIds[val.id] = true;
}
});
return num;
};

Extracting data from JSON using javascript

I have JSON similar to this . I wish to extract values like name, his id, and product title from this list . But I am not able to figure it out . I was trying "eval" for the same.
{
"data": [{
"id": "3092773937557",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T09:12:53+0000",
"end_time": "2012-07-21T09:12:53+0000",
"publish_time": "2012-07-21T09:12:53+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
}, {
"id": "3092770217464",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T09:08:53+0000",
"end_time": "2012-07-21T09:08:53+0000",
"publish_time": "2012-07-21T09:08:53+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
}],
"paging": {
"next": "https:\/\/graph.facebook.com\/me\/comparehatke:compare\/?access_token=AAAB4rubm4xkBAHRhdjVgx7JxIIvUxImIm31AMxgnqEAOQsAsgZAJjBYUfvzKc8XgxDBg3AzKN1S6QU2dnmtgj7TPcoCiih1RzrL3pLpuZAgGt8eKpq&limit=2&method=get&pretty=0&offset=2"
}
}

<html>
<script style="text/javscript">
var myObject = { "data": [{
"id": "3092741696751",
"from": {
"id": "1810306393",
"name": "Prashant Singh"
},
"start_time": "2012-07-21T08:40:38+0000",
"end_time": "2012-07-21T08:40:38+0000",
"publish_time": "2012-07-21T08:40:38+0000",
"application": {
"id": "132692593533721",
"name": "Compare Hatke"
},
"data1": {
"productname": "Apple iPod Nano",
"price": 399,
"product": {
"id": "10151004296768984",
"url": "http:\/\/compare.buyhatke.com\/products\/Apple-iPod-Nano",
"type": "comparehatke:product",
"title": "Apple iPod Nano"
}
},
"likes": {
"count": 0
},
"comments": {
"count": 0
},
"no_feed_story": false
} ]};
alert(myObject.data[0].id);
</script>
</html>

data = JSON.parse(yourJSONString);
If this fails, you likely have an error in your JSON. You can use http://jsonlint.com/ to find and resolve the problem. In the paste above, you're missing your closing ]}.

Categories

Resources