Develop Reference

convert a flat array that has a "path" property to a nested array

I have a flat array like this example :
[
{
'name':'itemA',
'path':'foo/bar'
},
{
'name':'itemB',
'path':'bar/foo'
},
{
'name':'itemC',
'path':'foo'
},
{
'name':'itemD',
'path':'bar'
},
{
'name':'itemE',
'path':'foo/bar/wizz'
},
{
'name':'itemF',
'path':'bar/foo'
},
]
I want to build a tree based on the "path" property, so I could get this output :
[
{
'name':'itemD',
'path':'bar',
'items':[
{
'name':'itemD',
'path':'bar/foo'
},
{
'name':'itemF',
'path':'bar/foo'
}
]
},
{
'name':'itemC',
'path':'foo',
'items':[
{
'name':'itemA',
'path':'foo/bar',
'items':
[
{
'name':'itemE',
'path':'foo/bar/wizz'
}
]
},
]
}
]
How could I achieve that ?
I found out some examples like this one, but they are based on a parent ID and not a "path" like mine.
Thanks a lot !

You could find the level or add a new object for the level of the splitted path.
const
data = [{ name: 'itemA', path: 'foo/bar' }, { name: 'itemB', path: 'bar/foo' }, { name: 'itemC', path: 'foo' }, { name: 'itemD', path: 'bar' }, { name: 'itemE', path: 'foo/bar/wizz' }, { name: 'itemF', path: 'bar/foo' }],
tree = data.reduce((items, { name, path }) => {
path.split('/').reduce((o, _, i, p) => {
let path = p.slice(0, i + 1).join('/'),
temp = (o.items ??= []).find(q => q.path === path);
if (!temp) o.items.push(temp = { name, path });
return temp;
}, { items });
return items;
}, []);
console.log(tree);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Group Multiple Objects Based on Type Using lodash

I want to group unordered-list-item and ordered-list-item.
Below is the original structure:
{
data: {
areas: [{
sections: [{
rjf: [
{
type: "unordered-list-item",
text: "Item 1",
},
{
type: "unordered-list-item",
text: "Item 2",
},
{
type: "paragraph",
text: "This is text",
}]
}]
}]
}
}
Now I want to group all list items into a new object.
So the expected structure is:
{
data: {
areas: [{
sections: [{
rjf: [
{
type: "list",
items: [{
type: "unordered-list-item",
text: "Item 1",
},
{
type: "unordered-list-item",
text: "Item 2",
}]
},
{
type: "paragraph",
text: "This is text",
}]
}]
}]
}
}
So I wanted to move all the unordered-list-item and ordered-list-item to items array and the following object type like paragraph shouldn't be impacted.
I created a solution in TypeScript, but the code was too long:
const areas = data.areas;
const listItemTypes = ['unordered-list-item', 'ordered-list-item'];
return areas.map(area => {
return area.sections.map(section => {
let lastHeadingIndex = -1;
return section.rjf.reduce((acc, current, index) => {
if (!current.type || !listItemTypes.includes(current.type)) {
lastHeadingIndex = acc.length;
return [...acc, current];
}
let listObject = acc.find((el, i) => i > lastHeadingIndex && i < index && el.type === 'list');
if (!listObject) {
listObject = {
type: 'list',
items: [current]
};
return [...acc, listObject];
}
listObject.items = [...listObject.items, current];
return acc;
}, []);
});
});
How can I achieve the same functionality using lodash?
****UPDATE****
I tried with lodash, but dosen't seems to work.
var content = {
data: {
areas: [{
sections: [{
rjf: [{
type: "unordered-list-item",
text: "Item 1",
},
{
type: "unordered-list-item",
text: "Item 2",
},
{
type: "paragraph",
text: "This is text",
}
]
}]
}]
}
};
var result = content.data.areas.map((area => {
return area.sections.map(section => {
section.rfj = _.groupBy(section.rfj, 'type');
});
}));
document.body.innerHTML = '<pre>' + JSON.stringify(result, null, ' ') + '</pre>';
<script src="https://cdn.jsdelivr.net/lodash/4.17.2/lodash.min.js"></script>

return data.areas.map((area => {
return area.sections.map(section => {
return section.rfj = _.groupBy(section.rfj, 'type')
})
})
You may need some more little tweaking on the result if you need a more specific structure, but this should do most of the work

You could simplify your code to something like this.
Use nested map on areas and sections.
You are returrning the arrays from both map. Return objects with sections and rjf property instead (Assuming both structures are objects with just one property)
When looping through rjf, create 2 arrays: items and others
Group each object to these 2 arrays based on whether types array includes the current object's type.
Create an array with one list object ({ type: "list", items }) and remaining objects from others array
const types = ['unordered-list-item', 'ordered-list-item'],
input = {data:{areas:[{sections:[{rjf:[{type:"unordered-list-item",text:"Item 1",},{type:"unordered-list-item",text:"Item 2",},{type:"paragraph",text:"This is text",}]}]}]}}
const areas = input.data.areas.map(a => {
return {
sections: a.sections.map(s => {
const items = [], others = [];
s.rjf.forEach(o =>
types.includes(o.type) ? items.push(o) : others.push(o)
)
return { rjf: [{ type: "list", items }, ...others] }
})
}
})
console.log({ data: { areas } })
.as-console-wrapper { max-height: 100% !important; top: 0; }

You could use another approach by copying each object leven and map all arrays and group the last level by using a function for grouping.
This approach uses am iter function which gets all functions for each level and the starting object.
At the end, it returns a new object with the given structure and the grouped items.
function copy(source, fn) {
return Object.assign({}, ...Object
.entries(source)
.map(([k, v]) => ({ [k]: fn(v) }))
);
}
function map(array, fn) {
return array.map(fn);
}
function group(array) {
var items;
return array.reduce((r, o) => {
if (listItemTypes.includes(o.type)) {
if (!items) {
items = [];
r.push({ type: 'list', items });
}
items.push(o);
} else {
items = undefined;
r.push(o);
}
return r;
}, []);
}
function iter([fn, ...fns], object) {
return fn ? fn(object, iter.bind(null, fns)) : object;
}
var object = { data: { areas: [{ sections: [{ rjf: [{ type: "unordered-list-item", text: "Item 1" }, { type: "unordered-list-item", text: "Item 2" }, { type: "paragraph", text: "This is text" }] }] }] } },
listItemTypes = ['unordered-list-item', 'ordered-list-item'],
result = iter([copy, copy, map, copy, map, copy, group], object);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Return an array of objects from a recursive function in Javascript

I'm working on recursive functions.
I must push all objects that have the key "data: true" in an array.
The console.log in the middle of my function gives me all those objects in separate arrays.
But I can't return an array with the objects at the end.
What am I doing wrong?
Thanks
const entries = {
root: {
data: true,
key: "root",
text: "some text"
},
test: {
one: {
two: {
data: true,
key: "test.one.two",
text: "some text.again"
},
three: {
data: true,
key: "test.one.three",
text: "some.more.text"
}
},
other: {
data: true,
key: "test3",
text: "sometext.text"
}
},
a: {
b: {
data: true,
key: "a.b",
text: "a.b.text"
},
c: {
d: {
data: true,
key: "a.c.d",
text: "some.a.c.d"
}
}
}
};
function recursiveFunc(data) {
let tab = [];
for (let property in data) {
if (data.hasOwnProperty(property)) {
if (data[property].data === true) {
tab.push(data[property]);
console.log("t", tab);
} else {
recursiveFunc(data[property])
}
}
}
return tab
}
console.log(recursiveFunc(entries));

Add tab.concat() on the recursive call for join the items returned by the recursive fn.
const entries = {
root: {
data: true,
key: "root",
text: "some text"
},
test: {
one: {
two: {
data: true,
key: "test.one.two",
text: "some text.again"
},
three: {
data: true,
key: "test.one.three",
text: "some.more.text"
}
},
other: {
data: true,
key: "test3",
text: "sometext.text"
}
},
a: {
b: {
data: true,
key: "a.b",
text: "a.b.text"
},
c: {
d: {
data: true,
key: "a.c.d",
text: "some.a.c.d"
}
}
}
};
function recursiveFunc(data) {
let tab = [];
for (let property in data) {
if (data.hasOwnProperty(property)) {
if (data[property].data === true) {
tab.push(data[property]);
console.log("t", tab);
} else {
tab = tab.concat(recursiveFunc(data[property]));
}
}
}
return tab
}
console.log(recursiveFunc(entries));

You can pass an array as second argument that will act as an accumulator.
Plus, I fixed your function that loops infinitely when data = false:
function recursiveFunc(data, acc) {
for (let property in data) {
if (data.hasOwnProperty(property) && typeof data[property] === "object") {
var current = data[property];
if (current.data === true) {
acc.push(current);
} else {
recursiveFunc(current, acc)
}
}
}
}
Usage:
var results = [];
recursiveFunc(entries, results);
console.log(results);

You could use a global variable.
const entries = { ... };
var tab = [];
function getTab(data) {
tab = [];
recursiveFunc(data);
return tab;
}
function recursiveFunc(data) {
for (let property in data) {
if (data.hasOwnProperty(property) && typeof data[property] === "object") {
if (data[property].data === true) {
tab.push(data[property]);
} else {
recursiveFunc(data[property])
}
}
}
}
getTab(entries);

How to traverse in a tree and filter matching nodes in javascript?

I have tried to filter nodes, but succeed to filter only root nodes.
My implementation is below.
How can I use a methodology to filter also sub-nodes?
function getMatchedValues(nodes)
{
var leafContainsText = false;
for (var i = 0; i < nodes.length; i++)
{
if (nodes[i].items && nodes[i].items.length > 0)
{
leafContainsText = getMatchedValues(nodes[i].items);
if (leafContainsText)
break;
}
else
{
if (nodes[i].text.toLowerCase().indexOf($scope.filterReports.toLowerCase()) !== -1)
{
leafContainsText = true;
break;
}
}
}
return leafContainsText;
}
$scope.temp_reports = [];
for (var i = 0; i < $scope.reports.length; i++)
{
if ($scope.reports[i].items && $scope.reports[i].items.length > 0)
{
if (getMatchedValues($scope.reports[i].items))
$scope.temp_reports.push($scope.reports[i]);
else if ($scope.reports[i].text.toLowerCase().indexOf($scope.filterReports.toLowerCase()) !== -1)
$scope.temp_reports.push($scope.reports[i]);
}
else
{
if ($scope.reports[i].text.toLowerCase().indexOf($scope.filterReports.toLowerCase()) !== -1)
$scope.temp_reports.push($scope.reports[i]);
}
}
The tree object($scope.reports) looks likes below:
[
{
text:"abc",
items:[
{
text:"abf"
},
{
text:"abd",
items:[
{
text:"bbb"
},
{
text:"dba"
}
]
}
]
},
{
text:"def",
items:[
{
text:"ddf"
},
{
text:"ddd",
items:[
{
text:"dfg"
},
{
text:"dba",
items:[
{
text:"qqq"
},
{
text:"www"
}
]
}
]
}
]
}
]
For example, If want to filter nodes that contain 'd' then result tree should look like this;
[
{
text:"abc",
items:[
{
text:"abd",
items:[
{
text:"dba"
}
]
}
]
},
{
text:"def",
items:[
{
text:"ddf"
},
{
text:"ddd",
items:[
{
text:"dfg"
},
{
text:"dba",
items:[]
}
]
}
]
}
]

You could filter the array by filtering the items array as well.
This solution mutates the original data.
function filter(array, search) {
return array.filter(function f(o) {
var t;
if (o.items) {
t = o.items.filter(f);
}
if (o.text.includes(search) || t && t.length) {
if (t) {
o.items = t;
}
return true;
}
});
}
var array = [{ text: "abc", items: [{ text: "abf" }, { text: "abd", items: [{ text: "bbb" }, { text: "dba" }] }] }, { text: "def", items: [{ text: "ddf" }, { text: "ddd", items: [{ text: "dfg" }, { text: "dba", items: [{ text: "qqq" }, { text: "www" }] }] }] }],
result = filter(array, 'd');
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Nesting JavaScript every & some

I'm trying to figure out why this is returning false:
var goodUsers = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
];
var testUsers = [
{ id: 1 },
{ id: 2 },
{ id: 3 }
];
console.log(testUsers.every(testUser => {
goodUsers.some(goodUser => {
testUser.id === goodUser.id
})
}));
I think my problem is with how I am nesting some inside of every. Any help would be appreciated. Thanks!

Your callbacks for .some and .every didn't actually return anything. That's why you were getting false.
var goodUsers = [
{ id: 1 },
{ id: 2 },
{ id: 3 },
];
var testUsers = [
{ id: 1 },
{ id: 2 },
{ id: 3 }
];
console.log(testUsers.every(testUser => {
return goodUsers.some(goodUser => {
return testUser.id === goodUser.id
});
}));
There is a difference between doing:
goodUser => testUser.id === goodUser.id
and
goodUser => { testUser.id === goodUser.id; }
The first - without {} - has an implicit return. It returns the value of the expression. It's the same as doing:
goodUser => { return testUser.id === goodUser.id; }
You were using {}, which starts a block of statements, and left out the return statement.
DOCS: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions