var array = [{"grandpa","father"}, {"father"}, {"grandpa","father","me"}];
Given the above array, I want to product a java-script object(JSON) like below, that has the parent-child like structure.
{"id":"grandpa",
"children":[
{"id":"father",
"children":[
{"id":"me",
"children":[]
}]
}]
}
If you're asking how you would take a list of hierarchy paths and create a tree structure, here's how you could do it in JavaScript:
function convertToHierarchy(arry /* array of array of strings */)
{
var item, path;
// Discard duplicates and set up parent/child relationships
var children = {};
var hasParent = {};
for (var i = 0; i < arry.length; i++)
{
var path = arry[i];
var parent = null;
for (var j = 0; j < path.length; j++)
{
var item = path[j];
if (!children[item]) {
children[item] = {};
}
if (parent) {
children[parent][item] = true; /* dummy value */
hasParent[item] = true;
}
parent = item;
}
}
// Now build the hierarchy
var result = [];
for (item in children) {
if (!hasParent[item]) {
result.push(buildNodeRecursive(item, children));
}
}
return result;
}
function buildNodeRecursive(item, children)
{
var node = {id:item, children:[]};
for (var child in children[item]) {
node.children.push(buildNodeRecursive(child, children));
}
return node;
}
convertToHierarchy([["1","2"], ["1"], ["1","2","3"]]);
Edit:
Your question is still ambiguous. My previous version assumed these two things:
Each node ID uniquely identifies a node
A specified hierarchy path can start at other than the root node
In this sample, I'll assume the following:
Node IDs are not unique, but they are unique within the children of a particular node
All hierarchy paths start at the root node of the tree
Here's the code:
function convertToHierarchy(arry /* array of array of strings */)
{
// Build the node structure
var rootNode = {id:"root", children:{}}
for (var i = 0; i < arry.length; i++)
{
var path = arry[i];
buildNodeRecursive(rootNode, path, 0);
}
return rootNode;
}
function buildNodeRecursive(node, path, idx)
{
if (idx < path.length)
{
item = path[idx];
if (!node.children[item])
{
node.children[item] = {id:item, children:{}};
}
buildNodeRecursive(node.children[item], path, idx + 1);
}
}
The hierarchy structure is returned, but the format's a bit different. However, you should get the picture.
I think this should work. I'm using firebug to track the structure of the output.
var el = {"name": "Level 1", "paths" : ["fruits"]};
var el2 = {"name": "Level 3", "paths" : ["fruits", "apples", "fuji"]};
var el3 = {"name": "Level 4", "paths" : ["fruits", "apples", "fuji", "red"]};
var el4 = {"name": "Level 2", "paths" : ["fruits", "apples"]};
var allEl = [el, el2, el3, el4];
/* Define recursive function for setting the child */
function setChild(parent, pos, arr, name)
{
if(pos < arr.length)
{
if(pos == arr.length-1) //last element of the paths
parent.name = name;
if(!parent.children){
parent.children = [];
parent.children[0] = new Object();
}
setChild(parent.children[0], pos + 1, arr, name);
}
}
/* Test starts here */
var root = new Object();
for(var i=0; i<allEl.length; i++)
{
var el = allEl[i];
setChild(root, 0, el.paths, el.name);
}
//Firefox debugging ...getfirebug.com
console.debug(root);
If you want to encode JSON, just use a JSON library.
Don't try and roll your own.
Related
From my data source I am getting values like;
USA |Arizona
USA |Florida
UK |England |Northamptonshire
UK |England |Derbyshire
UK |Wales |Powys
Switzerland|Lucern
These are flat text values that repeat in a column.
I need to build them dynamically into nested array
source: [
{title: "USA", children: [
{title: "Arizona"},
{title: "Florida"}
]}
],
As per https://github.com/mar10/fancytree/wiki/TutorialLoadData
Unfortunately my brain has stopped working today I am can't see a elegant way.
Any pointers would be most gratefully appreciated.
So I solved this eventually using a post from Oskar
function getNestedChildren(arr, parent) {
var out = []
for(var i in arr) {
if(arr[i].parent == parent) {
var children = getNestedChildren(arr, arr[i].id)
if(children.length) {
arr[i].children = children
}
out.push(arr[i])
}
}
return out
}
http://oskarhane.com/create-a-nested-array-recursively-in-javascript/
This builds the nested array.
To ensure inferred values were present (e.g. USA which is in the hierarchy but is not a unique value).
var CountryArray = CountryText.split("|");
// Variables to hold details of each section of the Country path being iterated
var CountryId = '';
var CountryParentPrefix = '';
var CountryParent = '';
// Iterate each section of the delimeted Country path and ensure that it is in the array
for(var i in CountryArray)
{
var CountryId = CountryParentPrefix+CountryArray[i];
// Find the Country id in the array / add if necessary
var result = FlatSource.filter(function (Country) { return Country.id == CountryId });
if (result.length == 0) {
// If the Country is not there then we should add it
var arrCountry = {title:CountryArray[i], parent:CountryParent, id:CountryId};
FlatSource.push(arrCountry);
}
// For the next path of the heirarchy
CountryParent = CountryId;
CountryParentPrefix = CountryId+'|';
}
I did not use Sven's suggestion but I suspect that it is equally valid.
Turn it to JSON:
var str = '"USA|Arizona","USA|Florida","UK|LonelyIsland","UK|England|Northamptonshire","UK|England|Derbyshire","UK|Wales|Powys","UK|England|London|Soho","Switzerland|Lucern';
var jsonStr = "[[" + str.replace(/,/g,'],[') + "\"]]";
jsonStr = jsonStr.replace(/\|/g,'","');
var nested = JSON.parse(jsonStr);
Then play with parents and children.
function findObject(array, key, value) {
for (var i=0; i<array.length; i++) {
if (array[i][key] === value) {
return array[i];
}
}
return null;
}
function obj(arr){
this.title = arr.shift();
}
obj.prototype.addChild = function(arr){
var tmp = new obj(arr);
if(typeof this.children === 'undefined'){
this.children = new Array();
result = this.children[this.children.push(tmp)-1];
}else{
result = findObject(this.children, 'title', tmp.title);
if(!result)
result = this.children[this.children.push(tmp)-1];
}
return result;
}
obj.prototype.addChildren = function(arr){
var obje = this;
while(arr.length>0)
obje = obje.addChild(arr);
}
var finArr = [];
for(i=0; i<nested.length; i++){
var recc = new obj(nested[i]);
if(oldObj = findObject(finArr, 'title', recc.title)){
oldObj.addChildren(nested[i]);
}else{
if(nested[i].length>0)
recc.addChildren(nested[i]);
finArr.push(recc);
}
}
console.log('------------------------------------------')
console.log(JSON.stringify(finArr));
console.log('--------------------The End---------------')
Given a data file which has an array representing a hierarchy. Create a tree data structure by writing a script in Javascript. Output the data in tree form:
Data file:
["transportation.cars.Mazda",
"transportation.cars.Honda",
"transportation.cars.Toyota",
"transportation.train.lightRail",
"transportation.train.rapidTransit",
"transportation.waterVehicle.ferry",
"transportation.waterVehicle.boats"
...]
Output in tree form:
root
transportation
cars
Mazda
Honda
Toyota
train
lightRail
rapidTransit
waterVehicle
ferry
boats
My attempt:
var root = new Node('root');
var arr = ["transportation.cars.Mazda",
"transportation.cars.Honda",
"transportation.cars.Toyota",
"transportation.train.lightRail",
"transportation.train.rapidTransit",
"transportation.waterVehicle.ferry",
"transportation.waterVehicle.boats"
]
for(var i of arr){
var res=i.split(".");
root.addChild(new Node(res[0]));
res[0].addChild(new Node(res[1]));
res[1].addChild(new Node(res[2]));
}
this.addChild = function(node) {
node.setParentNode(this);
this.children[this.children.length] = node;
}
console.log(root);
I am trying to create a tree structure using JavaScript, but it does not has the same function as in Java (i.e. it does not have class method unless using Typescript. )
You can use something similar to a trie tree. The way you add a node would have to be much more specific. But it's possible with something like this.
function Node(word)
{
this.value = word;
this.children = {};
}
function AddDotChain(chain)
{
let arr = chain.split('.');
let currentNode = this;
function recurse(currentIndex)
{
if(currentIndex === arr.length)
{
return;
}
let currentWord = arr[currentIndex];
if(currentNode.children[currentWord])
{
currentNode = currentNode[currentWord];
return recurse(currentIndex + 1);
}
let child = new Node(currentWord);
currentNode.children[currentWord] = child;
currentNode = child;
return recurse(currentIndex + 1);
}
}
Where you just slap the entire chain in there without splitting it. There's probably a flaw in my logic somewhere but the overall idea should work. This can also be done iteritavely if you wanna reduce the overhead of recursion. Forgive the messiness, Tried to type this as fast as possible.
Here's a sloppy sloppy implementation on repl.it.
You can do it, with a data structure as Tree, you only need loop over the array of string that contains the data and split them by dot and then add each item to the tree instance that will be created when you execute the function that take your array and output as a Tree data structure.
this code can help you
var arr = ["transportation.cars.Mazda",
"transportation.cars.Honda",
"transportation.cars.Toyota",
"transportation.train.lightRail",
"transportation.train.rapidTransit",
"transportation.waterVehicle.ferry",
"transportation.waterVehicle.boats"
];
function Node(data) {
this.data = data;
this.children = [];
}
function Tree(data) {
this.root = null;
}
Tree.prototype.contains = function(data) {
return this.find(data) ? true : false;
}
Tree.prototype.add = function(data, node) {
const newNode = new Node(data);
if (!this.root) {
this.root = newNode;
return;
}
const parent = node ? this.find(node) : null;
if (parent) {
if (!this.contains(data)) {
parent.children.push(newNode);
}
}
}
Tree.prototype.find = function(data) {
if (this.root) {
const queue = [this.root];
while(queue.length) {
const node = queue.shift();
if (node && node.data === data) {
return node;
}
for(var i = 0; i < node.children.length; i++) {
const child = node.children[i];
queue.push(child);
}
}
}
return null;
}
function createTreeOfTransportation(arr) {
const tree = new Tree();
for(var i = 0; i < arr.length; i++) {
const element = arr[i];
const nodes = element.split('.');
for (var j = 0; j < nodes.length; j++) {
const currentNode = nodes[j];
const parent = nodes[j-1];
console.log(j, parent);
tree.add(currentNode, parent);
}
}
return tree;
}
console.log(createTreeOfTransportation(arr));
I need to construct a tree structure from data represented in JSON as object and parent relationship. I have implemented below code which is successfully doing the job but I am not sure whether it's giving the best performance (I mean doing the job in as less as possible iteration).
Please Note, the root of the tree is represented as parent is same as object. e.g. {"object":"A", "parent":"A"}
Suggestions about any other implementation with better performance would be helpful!!
var jsonInput =
[
{"object":"A", "parent":"A"},
{"object":"B", "parent":"A"},
{"object":"C", "parent":"A"},
{"object":"D", "parent":"B"},
{"object":"E", "parent":"B"},
{"object":"F", "parent":"D"},
{"object":"G", "parent":"D"},
{"object":"H", "parent":"E"},
{"object":"I", "parent":"E"},
{"object":"J", "parent":"C"},
{"object":"K", "parent":"C"},
{"object":"L", "parent":"J"},
{"object":"M", "parent":"J"},
{"object":"N", "parent":"K"},
{"object":"O", "parent":"K"},
{"object":"P", "parent":"N"},
{"object":"Q", "parent":"N"},
{"object":"R", "parent":"O"},
{"object":"S", "parent":"O"}
];
var root = getRoot();
root.childs = findChildrens(root);
console.log("The tree hierarchy is:")
console.log(root);
function getRoot() {
var root;
for (var counter = 0; counter < jsonInput.length; counter++){
var item = jsonInput[counter];
if(item.object === item.parent) {
root = item;
break;
}
}
var returnValue = JSON.parse(JSON.stringify(root));
root.visited = true;
return returnValue;
}
function findChildrens(parentObject) {
var childs = [];
for (var counter = 0; counter < jsonInput.length; counter++){
var item = jsonInput[counter];
if(item.parent === parentObject.object && !item.visited) {
var child = JSON.parse(JSON.stringify(item));
item.visited = true;
child.childs = findChildrens(child);
childs.push(child);
}
}
return childs;
}
A simpler solution with a linear runtime.
var data = [
{"object":"A", "parent":"A"},
{"object":"B", "parent":"A"},
{"object":"C", "parent":"A"},
{"object":"D", "parent":"B"},
{"object":"E", "parent":"B"},
{"object":"F", "parent":"D"},
{"object":"G", "parent":"D"},
{"object":"H", "parent":"E"},
{"object":"I", "parent":"E"},
{"object":"J", "parent":"C"},
{"object":"K", "parent":"C"},
{"object":"L", "parent":"J"},
{"object":"M", "parent":"J"},
{"object":"N", "parent":"K"},
{"object":"O", "parent":"K"},
{"object":"P", "parent":"N"},
{"object":"Q", "parent":"N"},
{"object":"R", "parent":"O"},
{"object":"S", "parent":"O"}
];
var rootNodes = data.filter(function(node) {
if (node.object in this)
throw new Error("duplicate object " + node.object);
this[node.object] = node;
node.children = [];
if (node.parent === node.object) return true;
var parent = this[node.parent];
if (!parent)
throw new Error("invalid parent " + node.parent);
parent.children.push(node);
}, Object.create(null));
console.log(rootNodes);
.as-console-wrapper {
top: 0;
max-height: 100%!important
}
I have an array of objects, Where each object has an id and a ParentId property (so they can be arranged in trees). They are in no particular order.
Please note that the id's and parentId's will not be integers, they will be strings (just wanted to have the sample code cleaner..)
There is only one root: lets say its id:1
The data looks like so:
data = [
{
id:"id-2",
parentId:"id-3"
},
{
id:"id-4",
parentId:"2"
},
{
id:"id-3",
parentId:"id-4"
},
{
id:"id-5",
parentId:"id-4"
},
{
id:"id-6",
parentId:"id-1"
},
{
id:"id-7",
parentId:"id-1"
}
// and so on...
]
I am looking for a efficient way to give each object a level property which should specify the nested level it is...
They should then look like this:
data = [
{
id:"id-2",
parentId:"id-1",
level:2
},
{
id:"id-3",
parentId:"id-4",
level:5
},
{
id:"id-4",
parentId:"id-2",
level:3
},
{
id:"id-5",
parentId:"id-4",
level:5
},
{
id:"id-6",
parentId:"id-1",
level:2
},
{
id:"id-7",
parentId:"id-3",
level:4
}
// and so on...
]
In short:
I want that level to be added dynamically via looping thru the array and figuring out the hierarchy..
Additionally, (if posible) they should then be sorted according to there order, like for instance all objects level:3's from the same parent should be next to each other, not that there should be siblings of the same parent next to each other rather then two cousins of level 3 next to each other.
A working example of the below code is on jsFiddle.
Index the tree by id and traverse it upwards, from each node, and count until you hit the root. By indexing first, we approach O(n) time complexity (depending on tree density). ****Updated to satisfy the sorting requirement, and allow exclusion of root node***:
function levelAndSort(data, startingLevel) {
// indexes
var indexed = {}; // the original values
var nodeIndex = {}; // tree nodes
var i;
for (i = 0; i < data.length; i++) {
var id = data[i].id;
var node = {
id: id,
level: startingLevel,
children: [],
sorted: false
};
indexed[id] = data[i];
nodeIndex[id] = node;
}
// populate tree
for (i = 0; i < data.length; i++) {
var node = nodeIndex[data[i].id];
var pNode = node;
var j;
var nextId = indexed[pNode.id].parentId;
for (j = 0; nextId in nodeIndex; j++) {
pNode = nodeIndex[nextId];
if (j == 0) {
pNode.children.push(node.id);
}
node.level++;
nextId = indexed[pNode.id].parentId;
}
}
// extract nodes and sort-by-level
var nodes = [];
for (var key in nodeIndex) {
nodes.push(nodeIndex[key]);
}
nodes.sort(function(a, b) {
return a.level - b.level;
});
// refine the sort: group-by-siblings
var retval = [];
for (i = 0; i < nodes.length; i++) {
var node = nodes[i];
var parentId = indexed[node.id].parentId;
if (parentId in indexed) {
var pNode = nodeIndex[parentId];
var j;
for (j = 0; j < pNode.children.length; j++) {
var child = nodeIndex[pNode.children[j]];
if (!child.sorted) {
indexed[child.id].level = child.level;
retval.push(indexed[child.id]);
child.sorted = true;
}
}
}
else if (!node.sorted) {
indexed[node.id].level = node.level;
retval.push(indexed[node.id]);
node.sorted = true;
}
}
return retval;
}
Example:
// level 0 (root) excluded
var startingLevel = 1;
var someData = [
{id : "id-1", parentId : "id-0"},
{id : "id-2", parentId : "id-0"},
{id : "id-3", parentId : "id-2"},
{id : "id-4", parentId : "id-3"},
{id : "id-5", parentId : "id-4"},
{id : "id-6", parentId : "id-4"},
{id : "id-7", parentId : "id-0"},
{id : "id-8", parentId : "id-1"},
{id : "id-9", parentId : "id-7"},
{id : "id-10", parentId : "id-1"},
{id : "id-11", parentId : "id-1"},
{id : "id-12", parentId : "id-1"}
];
var outputArray = levelAndSort(someData, startingLevel);
Output:
Note
If you change the input order, the sort comes out a little different, but it's still correct (i.e., in level-order, grouped by sibling).
I'm not sure where you get the value for level so I'll assume that its just an integer. BTW, you can add the level property to each of your array's item by looping through it.
for (var i = 0, l = data.length; i < l; i++) {
data[i].level = i
}
which will give
data = [{id:"1", parentId:"3", level:0 }, {id:"2", parentId:"1", level:1 } ...]
Here is your working code. Level starts at 2.
ALERT: If a level cannot be calculated, the application may go into an infinite loop. So, make sure the parentId is valid for all objects and at least one of them have parentId="id-1".
<script type="text/javascript">
data = [
{
id:"id-2",
parentId:"id-3"
},
{
id:"id-4",
parentId:"id-2"
},
{
id:"id-3",
parentId:"id-5"
},
{
id:"id-5",
parentId:"id-1"
}
];
function processData() {
flag = true;
while(flag) {
flag = false;
for(var i = 0; i < data.length; i++) {
if(data[i].parentId == "id-1") {
data[i].level = 2;
} else {
l = getLevel(data[i].parentId);
if(l > 0) {
data[i].level = l + 1;
} else {
flag = true;
}
}
}
}
}
function getLevel(id) {
for(var i = 0; i < data.length; i++) {
if(data[i].id == id) {
if(data[i].level) {
return data[i].level;
} else {
return 0;
}
}
}
return 0;
}
processData();
console.log(data);
</script>
One way to address this without the need for recursion is to create a DOM hierarchy. For each item in the array, create a div and attach it to its parent. then walk the DOM and assign the levels (top is level 1, then add 1 for each child).
I have set up a rough demo here:
http://jsfiddle.net/4AqgM/
An excerpt from the code:
top.dataset.level="1";
var topChildren=top.getElementsByTagName("div");
for (var i=0;i<topChildren.length;i++) {
topChildren[i].dataset.level=parseInt(topChildren[i].parentNode.dataset.level)+1;
}
Say I have this JSON:
[
{
"ID": "1",
"title": "Title 1",
},
{
"ID": "2",
"title": "Title 2",
}
]
How would I return the set of key names that recur for each record? In this case, ID, title.
I tried:
$.getJSON('testing.json', function(data) {
var items = [];
$.each(data, function(key, val) {
items.push(key +', ');
});
$('<p/>', {
html: items.join('')
}).appendTo('#content');
});
without success.
This is a JSON "database", and every "record" has the same keys. I just want a script that will tell me what the keys are, not test whether or not they occur in every entry.
This will give you an array of all the string properties that match across an array of objects. Is that what you are looking for?
$.getJSON('testing.json', function(data) {
var propertiesThatExistInAll = getPropertiesThatExistInAll(data);
});
var getPropertiesThatExistInAll = function(arr) {
var properties = $.map(data[0], function (prop, value) {
return prop;
});
var propertiesThatExistInAll = [];
$.each(properties, function (index, property) {
var keyExistsInAll = true;
// skip the first one since we know it has all the properties
for (var i = 1, len = data.length; i < len; i++) {
if (!data[i].hasOwnProperty(property)) {
keyExistsInAll = false;
break;
}
}
if (keyExistsInAll) {
propertiesThatExistInAll.push(property);
}
});
return propertiesThatExistInAll;
};
Something like this, perhaps?
items = [];
for (key in jsonobj) {
if (!itemExists(items, key)) {
items[items.length] = key
}
}
function itemExists(items, value) {
for (i = 0; i < items.length; i++) {
if (items[i] == value) {
return true
}
}
return false;
}
Of course, that will return items that exist in any one of the objects, not that exist in all. It's not entirely clear from your question if this is the solution you want.
This can probably be made more efficient/concise, but the function below will do it.
var testJson = [ {'oi' : 1, 'arf': 2, 'foo' : 0}, {'oi': 5, 'arf': 7}];
function commonKeys(j)
{
var fillUp = [];
for(var i in j[0])
fillUp.push(i);
for(var i = 1; i < j.length; i++)
{
var cur = j[i]; var curArr = [];
for (var i in cur) {curArr.push(i)};
fillUp = fillUp.filter(function(x) {return (curArr.indexOf(x) != -1);});
}
return fillUp;
}
alert(commonKeys(testJson)); //oi,arf (not foo)