Related
I have the following problem. I'd like to convert an array of strings in dot notation to a nested json object.
example input: obj = {"project1.foo.a" : "value", "project1.foo.b" : "value","project1.bar" : "value", "project2.foo.a" : "value", "project2.foo.b" : "value", "project2.foo.c" : "value", "project2.foo.bar" : "value"};
desired output:
{
"id": 0,
"title": "Projects",
"has_children": 1,
"level": 1,
"value":"string",
"children": [
{
"id": 1,
"title": "Project 1",
"has_children": true,
"level": 2,
"value":"string",
"children": [
{
"id": 11,
"title": "foo",
"has_children": true,
"level": 3,
"value":"string",
"children": [
{
"id": 111,
"title": "a",
"has_children": false,
"level": 4,
"value":"string",
"children": [
]
},
{
"id": 112,
"title": "b",
"has_children": false,
"level": 4,
"value":"string",
"children": [
]
}
]
},
{
"id": 12,
"title": "bar",
"has_children": false,
"level": 3,
"value":"string",
"children": [
]
}
]
},
{
"id": 2,
"title": "Project 2",
"has_children": true,
"level": 2,
"value":"string",
"children": [
{
"id": 21,
"title": "foo",
"has_children": true,
"level": 3,
"value":"string",
"children": [
{
"id": 211,
"title": "a",
"has_children": false,
"level": 4,
"value":"string",
"children": [
]
},
{
"id": 212,
"title": "b",
"has_children": false,
"level": 4,
"value":"string",
"children": [
]
},
{
"id": 213,
"title": "c",
"has_children": false,
"level": 4,
"value":"string",
"children": [
]
}
]
},
{
"id": 22,
"title": "bar",
"has_children": false,
"level": 3,
"value":"string",
"children": [
]
}
]
}
]
}
There are great functions to unflatten the example object, e. g. with lodash, but I'm not able to add the descendants recursively into the childrens array.
example code:
const unflatten = (flattedObject) => {
let result = {};
_.keys(flattedObject).forEach(function (key, value){
_.set(result, key, flattedObject[key]);
})
return result;
}
console.log(unflatten(obj));
Maybe someone knows a good/neat or at least working approach to do this. :D I want to feed this plugin with the data https://travistidwell.com/jquery.treeselect.js/.
Related posts: How to populate jquery treeselect widget?
How to unflatten a JavaScript object in a daisy-chain/dot notation into an object with nested objects and arrays?
I have the following array of objects:
[
{
"id": 97,
"name": "Jon",
"technologies": [
{
"id": 6,
"name": "React"
},
{
"id": 7,
"name": "Messageria"
}
]
},
{
"id": 98,
"name": "Doe",
"technologies": [
{
"id": 2,
"name": "Javascript"
},
{
"id": 6,
"name": "React"
}
]
},
{
"id": 99,
"name": "Mark",
"technologies": [
{
"id": 8,
"name": "PHP"
},
{
"id": 9,
"name": "Laravel"
}
]
}
]
How could I filter this array and return only developers who have, for example, technology with id 6?
The return I need is only developers who have a relationship with technology id 6, however I need other related technologies to also appear to the developer.
I know that through the find method it is possible to do this, but I don't know how to implement it.
const result = developers.find(dev => dev.technologies ?);
What would be the correct form?
You can use filter with some array operations for this task. Something like this:
persons.filter(person => person.technologies.some(tech => tech.id == 6))
This will return details of person with technology id 6:
persons = [
{
"id": 97,
"name": "Jon",
"technologies": [
{
"id": 6,
"name": "React"
},
{
"id": 7,
"name": "Messageria"
}
]
},
{
"id": 98,
"name": "Doe",
"technologies": [
{
"id": 2,
"name": "Javascript"
},
{
"id": 6,
"name": "React"
}
]
},
{
"id": 99,
"name": "Mark",
"technologies": [
{
"id": 8,
"name": "PHP"
},
{
"id": 9,
"name": "Laravel"
}
]
}
]
persons.filter(person => person.technologies.find(tech => tech.id == 6))
You need to use some for finding whether element exist with specific id or not:
const data = [
{
"id": 97,
"name": "Jon",
"technologies": [
{
"id": 6,
"name": "React"
},
{
"id": 7,
"name": "Messageria"
}
]
},
{
"id": 98,
"name": "Doe",
"technologies": [
{
"id": 2,
"name": "Javascript"
},
{
"id": 6,
"name": "React"
}
]
},
{
"id": 99,
"name": "Mark",
"technologies": [
{
"id": 8,
"name": "PHP"
},
{
"id": 9,
"name": "Laravel"
}
]
}
]
const myFilteredData = data.filter(test => test.technologies.some(data => data.id===6));
console.log(
myFilteredData
)
I have a forest of trees of arbitrary height, more or less like this:
let data = [
{ "id": 2, "name": "AAA", "parent_id": null, "short_name": "A" },
{
"id": 10, "name": "BBB", "parent_id": null, "short_name": "B", "children": [
{
"id": 3, "name": "CCC", "parent_id": 10, "short_name": "C", "children": [
{ "id": 6, "name": "DDD", "parent_id": 3, "short_name": "D" },
{ "id": 5, "name": "EEE", "parent_id": 3, "short_name": "E" }
]
},
{
"id": 4, "name": "FFF", "parent_id": 10, "short_name": "F", "children": [
{ "id": 7, "name": "GGG", "parent_id": 4, "short_name": "G" },
{ "id": 8, "name": "HHH", "parent_id": 4, "short_name": "H" }
]
}]
}
];
And I'm trying to produce a representation of all the root-to-leaves paths, something like this
[
[
{
"id": 2,
"name": "AAA"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 3,
"name": "C"
},
{
"id": 6,
"name": "DDD"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 3,
"name": "C"
},
{
"id": 5,
"name": "EEE"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 4,
"name": "F"
},
{
"id": 7,
"name": "GGG"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 4,
"name": "F"
},
{
"id": 8,
"name": "HHH"
}
]
]
So I wrote the following code:
function flattenTree(node, path = []) {
if (node.children) {
return node.children.map(child => flattenTree(child, [...path, child]));
} else {
let prefix = path.slice(0, path.length - 1).map(n => ({ id: n.id, name: n.short_name }));
let last = path[path.length - 1];
return [...prefix, { id: last.id, name: last.name } ];
}
}
let paths = data.map(n => flattenTree(n, [n]));
but paths comes out with extra nesting, like this:
[
[
{
"id": 2,
"name": "AAA"
}
],
[
[
[
{
"id": 10,
"name": "B"
},
{
"id": 3,
"name": "C"
},
{
"id": 6,
"name": "DDD"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 3,
"name": "C"
},
{
"id": 5,
"name": "EEE"
}
]
],
[
[
{
"id": 10,
"name": "B"
},
{
"id": 4,
"name": "F"
},
{
"id": 7,
"name": "GGG"
}
],
[
{
"id": 10,
"name": "B"
},
{
"id": 4,
"name": "F"
},
{
"id": 8,
"name": "HHH"
}
]
]
]
]
I lost count of the many ways in which I tried to fix this, but it does look like the algorithm should not produce the extra nesting -- or my eyes are just so crossed by now that I couldn't see my mistake if someone stuck their finger on it.
Can someone help? Feel free to peruse this JSFiddle https://jsfiddle.net/png7x9bh/66/
The extra nestings are created by map. map just wraps the results into an array and returns them, it doesn't care if it is called on child nodes or not. Use reduce and just concat (or push, whatever suits your performance) the results into the first level array directly:
let data = [{"id":2,"name":"AAA","parent_id":null,"short_name":"A"},{"id":10,"name":"BBB","parent_id":null,"short_name":"B","children":[{"id":3,"name":"CCC","parent_id":10,"short_name":"C","children":[{"id":6,"name":"DDD","parent_id":3,"short_name":"D"},{"id":5,"name":"EEE","parent_id":3,"short_name":"E"}]},{"id":4,"name":"FFF","parent_id":10,"short_name":"F","children":[{"id":7,"name":"GGG","parent_id":4,"short_name":"G"},{"id":8,"name":"HHH","parent_id":4,"short_name":"H"}]}]}];
function flattenTree(node, path = []) {
let pathCopy = Array.from(path);
pathCopy.push({id: node.id, name: node.name});
if(node.children) {
return node.children.reduce((acc, child) => acc.concat(flattenTree(child, pathCopy)), []);
}
return [pathCopy];
}
let result = data.reduce((result, node) => result.concat(flattenTree(node)), []);
console.log(JSON.stringify(result, null, 3));
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))
I have an array like this in Javascript. Something like this
[
{
"id": 1,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 3,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
]
I want to collect data and grouping data facilities of the array in Javascript, something like this.
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
So, basically, group by facilities. I just don't know how to handle the grouping of similar facilities values.
Assuming the facility ids are unique:
const facilities = input.reduce((memo, entry) => {
entry.facilities.forEach((f) => {
if (!memo.some((m) => m.id === f.id)) {
memo.push(f)
}
})
return memo
}, [])
You can iterate through all rows and collect (id, entity) map.
Index map allows us to not search already collected entities every time.
Then you can convert it to an array with object keys mapping.
let input = [
{"id": 1, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"} ] },
{"id": 2, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"}, {"id": 13, "name": "Snack", "label": "Snack"} ] },
{"id": 3, "facilities": [{"id": 10, "name": "Wifi", "label": "Wifi"}, {"id": 12, "name": "Toll", "label": "Toll"}, {"id": 14, "name": "Petrol", "label": "Petrol"} ] }
];
let index = input.reduce((res, row) => {
row.facilities.forEach(f => res[f.id] = f);
return res;
}, {});
let result = Object.keys(index).map(id => index[id]);
console.log({facilities: result});
You could use a Set for flagging inserted objects with the given id.
var data = [{ id: 1, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }] }, { id: 2, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }, { id: 13, name: "Snack", label: "Snack" }] }, { id: 3, facilities: [{ id: 10, name: "Wifi", label: "Wifi" }, { id: 12, name: "Toll", label: "Toll" }, { id: 14, name: "Petrol", label: "Petrol" }] }],
grouped = data.reduce(
(s => (r, a) => (a.facilities.forEach(b => !s.has(b.id) && s.add(b.id) && r.push(b)), r))(new Set),
[]
);
console.log(grouped);
.as-console-wrapper { max-height: 100% !important; top: 0; }
The solution using Array.prototype.reduce() and Set object:
var data = [{"id": 1,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"}]},{"id": 2,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"},{"id": 13,"name": "Snack","label": "Snack"}]},{"id": 3,"facilities": [{"id": 10,"name": "Wifi","label": "Wifi"},{"id": 12,"name": "Toll","label": "Toll"},{"id": 14,"name": "Petrol","label": "Petrol"}]}
];
var ids = new Set(),
result = data.reduce(function (r, o) {
o.facilities.forEach(function(v) { // iterating through nested `facilities`
if (!ids.has(v.id)) r.facilities.push(v);
ids.add(v.id); // saving only items with unique `id`
});
return r;
}, {facilities: []});
console.log(result);
const input = [
{
"id": 1,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 3,
"facilities": [
{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
]
const result = []
const idx = []
for (const item of input) {
for (const facilityItem of item.facilities) {
if (!idx.includes(facilityItem.id)) {
idx.push(facilityItem.id)
result.push(facilityItem)
}
}
}
console.log(result)
A very simple and easily understood approach.
const data = [{
"id": 1,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
}
]
},
{
"id": 2,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 13,
"name": "Snack",
"label": "Snack"
}
]
},
{
"id": 2,
"facilities": [{
"id": 10,
"name": "Wifi",
"label": "Wifi"
},
{
"id": 12,
"name": "Toll",
"label": "Toll"
},
{
"id": 14,
"name": "Petrol",
"label": "Petrol"
}
]
}
];
let o = {};
let result = [];
data.forEach((d) => {
d.facilities.forEach((f) => {
o[f.id] = f;
});
});
for (let r in o) {
result.push(o[r]);
}
console.log(result);