Show nested array items react native - javascript

I have array of comments and their replies like this:
[
{
commentId: "5efd85d5b2eff7063b8ec802",
description: "some comment description",
isAnonymous: false,
createdAt: "2020-07-02T06:59:33.317Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [
{
commentId: "5efd86b7b2eff7063b8ec803",
parentId: "5efd85d5b2eff7063b8ec802",
description: "some comment description",
isAnonymous: false,
createdAt: "2020-07-02T07:03:19.405Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [
{
commentId: "5efd89c4b2eff7063b8ec805",
parentId: "5efd86b7b2eff7063b8ec803",
description: "Child of Child",
isAnonymous: false,
createdAt: "2020-07-02T07:16:20.717Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [],
},
],
},
{
commentId: "5efd8996b2eff7063b8ec804",
parentId: "5efd85d5b2eff7063b8ec802",
description: "Child of Child",
isAnonymous: false,
createdAt: "2020-07-02T07:15:34.341Z",
currentUserLiked: 0,
likes: 0,
user: {
firstName: "ar",
lastName: "ar",
email: "test#email.com",
username: "sami",
isVerified: false,
},
children: [],
},
],
},
];
and I want to show them as all children in same level in react native using flatList.
How can I do this?


Do I understand correctly?:
const comments = [{id: 1, children: [{id: 2, children: [{id: 3, children:[]}]}]}];
const flatComments = (list) => {
return list.flatMap(el => {
const {children, ...out} = el;
return [out, ...flatComments(children)];
});
};
flatComments(comments);
// [{id: 1}, {id: 2}, {id: 3}];

Related

Can you skip a level in a nested object without knowing the key in Javascript?

Hi I have this object
15: {
name: "Jane",
age: 43,
children: {
32: {
name: "Janette",
age: 24,
children: {
487: {
name: "Alex",
age: 3,
children: [],
},
166: {
name: "Marcus",
age: 1,
children: [],
},
},
},
},
},
104: {
name: "Eric",
age: 24,
children: [],
},
};
I want to remove or and skip through directly to the children. But it is a random produced key value "between". How can I make a new array or just modify it since I don't know what the key will be?
I want it to be like this:
var object = [
{
name: "Jane",
age: 43,
children: [
{
name: "Janette",
age: 24,
children: [
{
name: "Alex",
age: 3,
children: [],
},
{
name: "Marcus",
age: 1,
children: [],
},
],
},
],
},
{
name: "Eric",
age: 43,
children: [],
},
];
So as you see in the code, the ID with numbers are gone in that object that I want to make. Can you jump directly to the children if they exist?

you can do something like this
const stripKeys = data => Object.values(data)
.map(d => ({
...d,
children: stripKeys(d.children)
}))
const data = {
15: {
name: "Jane",
age: 43,
children: {
32: {
name: "Janette",
age: 24,
children: {
487: {
name: "Alex",
age: 3,
children: [],
},
166: {
name: "Marcus",
age: 1,
children: [],
},
},
},
},
},
104: {
name: "Eric",
age: 24,
children: [],
},
};
console.log(stripKeys(data))

Compare id of two array, then set value equa to an array

I have two array like this:
let arr1 = [
{id: "1", icon: Images.icon.food, checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: Images.icon.delivery, checkable: false, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: Images.icon.collection, checkable: false, text: 'Collection', description: "coupon for collection"},
]
let arr2 = [
{description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in"},
{description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery"},
{description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection"}
]
How to compare id of arr1 equa to serviceId of arr2, and then set value checkable in arr1 equa to isActice in arr2
This is result I want to be:
result = [
{id: "1", icon: Images.icon.food, checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: Images.icon.delivery, checkable: true, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: Images.icon.collection, checkable: true, text: 'Collection', description: "coupon for collection"},
]
Means result like arr1 but change checkable equa to isActive of arr2.
Thank you.

Use can simply use find and use an arrow function to define the comparision expression. And then you can simply do the attribution directly
let arr1 = [
{id: "1", icon: 'food', checkable: false, text: 'Dine-in', description: "coupon for dine in"},
{id: "2", icon: 'delivery', checkable: false, text: 'Delivery', description: "coupon for delivery"},
{id: "3", icon: 'collection', checkable: false, text: 'Collection', description: "coupon for collection"},
];
let arr2 = [
{description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in"},
{description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery"},
{description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection"}
];
for(let i = 0; i < arr1.length; i++){
arr1[i].checkable = arr2.find(x => x.serviceId == arr1[i].id).isActive;
console.log(arr1[i]);
}
If you prefer a one line forEach
arr1.forEach((array1) => array1.checkable = arr2.find(x => x.serviceId == array1.id).isActive );

You could collect all active states in an object and map new object with the state.
let arr1 = [{ id: "1", icon: 'Images.icon.food', checkable: false, text: 'Dine-in', description: "coupon for dine in" }, { id: "2", icon: 'Images.icon.delivery', checkable: false, text: 'Delivery', description: "coupon for delivery" }, { id: "3", icon: 'Images.icon.collection', checkable: false, text: 'Collection', description: "coupon for collection" }],
arr2 = [{ description: "Dine in Service", id: "13", isActive: false, name: "Dine In", serviceDetail: null, serviceId: "1", slug: "dine-in" }, { description: "Delivery Service", id: "14", isActive: true, name: "Delivery", serviceDetail: null, serviceId: "2", slug:"delivery" }, { description: "Collection Service", id: "15", isActive: true, name: "Collection", serviceDetail: null, serviceId: "3", slug: "collection" }],
isActive = Object.fromEntries(arr2.map(({ serviceId, isActive }) => [serviceId, isActive])),
result = arr1.map(o => ({ ...o, isActive: isActive[o.id] }));
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }

How to merge Primary object with child objects using and ID reference in Parent to each child

I have a primary parent collection (Projects) and 2 child collections stored as arrays with objects.
Projects
const projects = {
items: [
{
name: "Logo and Branding for Iron Kettle",
skills: [
"579b150756ea2dba79c1f09f",
"579b150756ea2dba79c1f062"
],
solutions: [
"579b150756ea2dba79c1f09e",
"579b150756ea2dba79c1f077"
],
_cid: "579b150756ea2dba79c1efcb",
_id: "579b150756ea2dba79c1f0af"
},
{
name: "Snow shoot for media company",
skills: [
"579b150756ea2dba79c1f072",
"579b150756ea2dba79c1f062"
],
solutions": [
"579b150756ea2dba79c1f09e",
"579b150756ea2dba79c1f071",
],
_cid: "579b150756ea2dba79c1efcb",
_id: "579b150756ea2dba79c1f06a"
}
],
count: 12,
limit: 100,
offset: 0,
total: 12
};
Skills
const skills = {
items: [
{
name: "Logo Design",
_cid: "579b150756ea2dba79c1efdf",
_id: "579b150756ea2dba79c1f09f"
},
{
name: "Brand Research",
_cid: "579b150756ea2dba79c1efdf",
_id: "579b150756ea2dba79c1f072"
},
{
name: "Graphic Design",
_cid: "579b150756ea2dba79c1efdf",
_id: "579b150756ea2dba79c1f062"
}
],
count: 13,
limit: 100,
offset: 0,
total: 13
};
Solutions
const solutions = {
items: [
{
name: "Location research",
_cid: "579b150756ea2dba79c1eff3",
_id: "579b150756ea2dba79c1f09e"
},
{
name: "Complete photo shoot",
_cid: "579b150756ea2dba79c1eff3",
_id: "579b150756ea2dba79c1f071"
},
{
name: "Competition Analysis",
_cid: "579b150756ea2dba79c1eff3",
_id: "579b150756ea2dba79c1f077"
}
],
count: 19,
limit: 100,
offset: 0,
total: 19
};
I need to return a new projects array with the skills and solutions id's populated with the actual object from the relevant array.
This would be the end result of one item the new array.
{
name: "Logo and Branding for Iron Kettle",
skills: [
{
name: "Logo Design",
_cid: "579b150756ea2dba79c1efdf",
_id: "579b150756ea2dba79c1f09f"
},
{
name: "Graphic Design",
_cid: "579b150756ea2dba79c1efdf",
_id: "579b150756ea2dba79c1f062"
}
],
solutions: [
{
name: "Location research",
_cid: "579b150756ea2dba79c1eff3",
_id: "579b150756ea2dba79c1f09e"
},
{
name: "Competition Analysis",
_cid: "579b150756ea2dba79c1eff3",
_id: "579b150756ea2dba79c1f077"
}
],
_cid: "579b150756ea2dba79c1efcb",
_id: "579b150756ea2dba79c1f0af"
},

Try something like this:
projects.items.map(i => ({
...i,
skills: i.skills.map(s => skills.items.find(skill => skill._id === s)),
solutions: i.solutions.map(s => solutions.items.find(solution => solution._id === s))
}));

Grouping the object by key for Chartjs bar chart

I'm trying to create bar chart using Chart.js. I got stuck trying to create grouped bar chart based on the status per user. So here's the data:
[{statusId: 0, firstName: "Joe", status: "appealed", count: 1},
{statusId: 0, firstName: "Jane", status: "approved", count: 100},
{statusId: 0, firstName: "Smith", status: "approved", count: 63},
{statusId: 0, firstName: "Mike", status: "approved", count: 63},
{statusId: 0, firstName: "Ken", status: "approved", count: 35},
{statusId: 0, firstName: "Kim", status: "approved", count: 193},
{statusId: 0, firstName: "Joe", status: "approved", count: 1},
{statusId: 0, firstName: "Jane", status: "closed", count: 1},
{statusId: 0, firstName: "Joe", status: "concluded", count: 1},
{statusId: 0, firstName: "Jane", status: "denied", count: 6},
{statusId: 0, firstName: "Smith", status: "denied", count: 9},
{statusId: 0, firstName: "Mike", status: "denied", count: 1},
{statusId: 0, firstName: "Mark", status: "denied", count: 8},
{statusId: 0, firstName: "Ken", status: "denied", count: 2},
{statusId: 0, firstName: "Kim", status: "denied", count: 20},
{statusId: 0, firstName: "Joe", status: "denied", count: 2},
{statusId: 0, firstName: "Joe", status: "transferred", count: 1}]
From this data, I need to create a chart for users in x-axis with count of each status for the user. It can be easily done in Chartjs by having array of datasets like the following:
datasets:[{
data: [//some counts for a group],
},
{
data: [// counts for another group],
}
// and so on
}]
The problem is I'll need to group these data based on the status. So, one solution I can think of is:
angular.forEeach(data, function(val)){
switch(val.status){
case 'approved':
// add count to an approved count array
break;
case 'appealed':
// add count to appealed count array
break;
}
}
But I think there're problems with this one. What if they create another status e.g. pending. Then I'll have to go back and change the code. Is there anyway I can group the objects by status and create an array of count data for each group that I can then use in datasets?
I just signed up for javascript course in pluralsight, so it'll still take me a while to learn advanced javascript. In the meantime, can anyone show me the proper and efficient way to solve this puzzle?
EXAMPLE
Chart.js requires data to be in the following format:
var data = {
labels: ['Joe', 'Jane', 'Smith', 'Mike', 'Ken', 'Kim', 'Mark'],
datasets: [
{
label: 'Appealed',
fillColor: '#382765',
data: [1,0,0,0,0,0,0]
},
{
label: 'Approved',
fillColor: '#7BC225',
data: [1, 100, 63, 63, 35, 193,0]
},
{
label: 'Denied',
fillColor: '#2196F3',
data: [2, 6, 9, 1, 2, 20, 8]
},
]
}
So, what's happening here is for each item in labels there's a count for the status i.e. label in data array inside datasets array. For e.g.: data array for Appealed label: 1 is the count of appealed for Joe and rest is 0 for all other users.

You could use a hash table as reference to the array with the same status and another hash table for indices of the names. then build the labels array and datasets.
var raw = [{ statusId: 0, firstName: "Joe", status: "appealed", count: 1 }, { statusId: 0, firstName: "Jane", status: "approved", count: 100 }, { statusId: 0, firstName: "Smith", status: "approved", count: 63 }, { statusId: 0, firstName: "Mike", status: "approved", count: 63 }, { statusId: 0, firstName: "Ken", status: "approved", count: 35 }, { statusId: 0, firstName: "Kim", status: "approved", count: 193 }, { statusId: 0, firstName: "JoeJoe", status: "approved", count: 1 }, { statusId: 0, firstName: "Jane", status: "closed", count: 1 }, { statusId: 0, firstName: "Joe", status: "concluded", count: 1 }, { statusId: 0, firstName: "Jane", status: "denied", count: 6 }, { statusId: 0, firstName: "Smith", status: "denied", count: 9 }, { statusId: 0, firstName: "Mike", status: "denied", count: 1 }, { statusId: 0, firstName: "Mark", status: "denied", count: 8 }, { statusId: 0, firstName: "Ken", status: "denied", count: 2 }, { statusId: 0, firstName: "Kim", status: "denied", count: 20 }, { statusId: 0, firstName: "Joe", status: "denied", count: 2 }, { statusId: 0, firstName: "Joe", status: "transferred", count: 1 }],
nameIndices = Object.create(null),
statusHash = Object.create(null),
data = { labels: [], datasets: [] };
raw.forEach(function (o) {
if (!(o.firstName in nameIndices)) {
nameIndices[o.firstName] = data.labels.push(o.firstName) - 1;
data.datasets.forEach(function (a) { a.data.push(0); });
}
if (!statusHash[o.status]) {
statusHash[o.status] = { label: o.status, fillcolor: 'f00', data: data.labels.map(function () { return 0; }) };
data.datasets.push(statusHash[o.status]);
}
statusHash[o.status].data[nameIndices[o.firstName]] = o.count;
});
console.log(data);
.as-console-wrapper { max-height: 100% !important; top: 0; }

Reconstructing an n-level object/array with recursion

I have a JavaScript object which contains lots of properties. I need to create another similar hierarchy but I only need few properties.
[
{
_id: "559d0fcdd791e5c452345e80",
name: "Books",
lastUpdated: "2015-07-08T11:55:57.891Z",
body: "",
children: [
{
_id: "559d0fd9d791e5c452345e81",
name: "web apps",
__v: 2,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:09.356Z",
body: "",
children: [
{
_id: "559d0fe9d791e5c452345e83",
name: ".net",
__v: 1,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:25.139Z",
body: "",
children: [
{
_id: "559d0ff2d791e5c452345e84",
name: "asp.net",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:34.306Z",
body: "",
children: [
],
parent: "559d0fe9d791e5c452345e83",
description: ""
}
],
parent: "559d0fd9d791e5c452345e81",
description: ""
},
{
_id: "559d0ffad791e5c452345e85",
name: "java",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:42.663Z",
body: "",
children: [
],
parent: "559d0fd9d791e5c452345e81",
description: ""
}
],
parent: "559d0fcdd791e5c452345e80",
description: ""
},
{
_id: "559d0fe0d791e5c452345e82",
name: "db",
__v: 2,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:16.436Z",
body: "",
children: [
{
_id: "559d1006d791e5c452345e86",
name: "SQL server",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:54.289Z",
body: "",
children: [
],
parent: "559d0fe0d791e5c452345e82",
description: ""
},
{
_id: "559d101ad791e5c452345e87",
name: "NO SQL",
__v: 1,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:57:14.988Z",
body: "",
children: [
{
_id: "559d1025d791e5c452345e88",
name: "MongoDB",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:57:25.044Z",
body: "",
children: [
],
parent: "559d101ad791e5c452345e87",
description: ""
}
],
parent: "559d0fe0d791e5c452345e82",
description: ""
}
],
parent: "559d0fcdd791e5c452345e80",
description: ""
}
],
parent: null,
description: "Some books"
}
]
From this I need to create a hierarchy like this:
[{
text: 'books',
nodes: [{
text:'web apps',
nodes:[{
text: '.net',
nodes:[{
text:'asp.net',
nodes:[]
}]
},{
text: 'java',
nodes:[]
}]
},{
text: 'DB',
nodes: [{
text: 'SQL Server'
},{
text: 'NO SQL',
nodes:[{
text: 'MongoDB'
}]
}]
}]
}]
I am trying to create a recursive loop but not sure how to add child nodes. How can I get the desired result.

You need a recursive function. This one is constructed for your specific data input:
function reduce (input, output) {
output = [];
$.each(input, function(key, val) {
output[key] = {};
output[key].text = val.name;
output[key].nodes = reduce(val.children);
});
return output;
}
and it is called with output = reduce(input);
Here's a snippet:
input = [
{
_id: "559d0fcdd791e5c452345e80",
name: "Books",
lastUpdated: "2015-07-08T11:55:57.891Z",
body: "",
children: [
{
_id: "559d0fd9d791e5c452345e81",
name: "web apps",
__v: 2,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:09.356Z",
body: "",
children: [
{
_id: "559d0fe9d791e5c452345e83",
name: ".net",
__v: 1,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:25.139Z",
body: "",
children: [
{
_id: "559d0ff2d791e5c452345e84",
name: "asp.net",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:34.306Z",
body: "",
children: [
],
parent: "559d0fe9d791e5c452345e83",
description: ""
}
],
parent: "559d0fd9d791e5c452345e81",
description: ""
},
{
_id: "559d0ffad791e5c452345e85",
name: "java",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:42.663Z",
body: "",
children: [
],
parent: "559d0fd9d791e5c452345e81",
description: ""
}
],
parent: "559d0fcdd791e5c452345e80",
description: ""
},
{
_id: "559d0fe0d791e5c452345e82",
name: "db",
__v: 2,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:16.436Z",
body: "",
children: [
{
_id: "559d1006d791e5c452345e86",
name: "SQL server",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:56:54.289Z",
body: "",
children: [
],
parent: "559d0fe0d791e5c452345e82",
description: ""
},
{
_id: "559d101ad791e5c452345e87",
name: "NO SQL",
__v: 1,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:57:14.988Z",
body: "",
children: [
{
_id: "559d1025d791e5c452345e88",
name: "MongoDB",
__v: 0,
media: {
images: [
]
},
lastUpdated: "2015-07-08T11:57:25.044Z",
body: "",
children: [
],
parent: "559d101ad791e5c452345e87",
description: ""
}
],
parent: "559d0fe0d791e5c452345e82",
description: ""
}
],
parent: "559d0fcdd791e5c452345e80",
description: ""
}
],
parent: null,
description: "Some books"
}
]
function reduce (input, output) {
output = [];
$.each(input, function(key, val) {
output[key] = {};
output[key].text = val.name;
output[key].nodes = reduce(val.children);
});
return output;
}
output = reduce(input);
$('div').text(JSON.stringify(output));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Categories

Resources