Nested array of object data display on UI [duplicate] - javascript

This question already has answers here:
How to use nested Map in React component with the given data
(2 answers)
Closed 3 months ago.
I have following response from backend as an array of object,
const cloudData = [
{
dataCenter: "AWS-East",
availablechannels: [
{
channelName: "E-channel1",
id: 1,
},
{
channelName: "E-channel2",
id: 2,
},
{
channelName: "E-channel3",
id: 3,
},
],
},
{
dataCenter: "AWS-West",
availablechannels: [
{
channelName: "W-channel1",
id: 1,
},
{
channelName: "W-channel2",
id: 2,
},
{
channelName: "W-channel3",
id: 3,
},
],
},
];
I need to display on UI grid in following way ,
AWS East
E-channel1
E-channel2
E-channel3
I have tried using es6 map and filter

You can do this :
cloudData.forEach((datacenter)=> {
console.log(datacenter.dataCenter)
datacenter.availablechannels.forEach((channel)=>{
console.log(channel.channelName)
})
})

Related

How to access property on JSON with Arrays and Objects [duplicate]

This question already has answers here:
How can I access and process nested objects, arrays, or JSON?
(31 answers)
Closed 2 years ago.
I have this JSON:
[
{ someTitle: 'NAME OF SomeTitle' },
[
{
id: '7oiqxhRXRqEV0D70G',
photo: 'https://co/image/ab67616d739a3e7d0c38c3af225e4695ce',
jugement: 'GOAl',
Name: 'Some Name.'
}
],
{
token: 'BQAVhYiUweHGTTlIIZHthAKzulZ-DHg'
}
]
This comes from a request I make to my node Server. If I do a console.log(req.body) I get the information above.
So when I try to do console.log(req.body.token) I get undefined.
How can I access the token property then?
The size of the JSON may change , so I can't just access it by index.
Since it is an array of objects, and the element you are looking for is at the 3th position of the array. You need to call it using index = 2 (because index starts with 0).
After that, you can access token property.
const res = [{
someTitle: 'NAME OF SomeTitle'
},
[{
id: '7oiqxhRXRqEV0D70G',
photo: 'https://co/image/ab67616d739a3e7d0c38c3af225e4695ce',
jugement: 'GOAl',
Name: 'Some Name.'
}],
{
token: 'BQAVhYiUweHGTTlIIZHthAKzulZ-DHg'
}
]
console.log(res[2].token)
Check this out
console.log(req.body[2]["token"])
If Array size is not fixed then try this
let req = {
body: [
{ someTitle: "NAME OF SomeTitle" },
[
{
id: "7oiqxhRXRqEV0D70G",
photo: "https://co/image/ab67616d739a3e7d0c38c3af225e4695ce",
jugement: "GOAl",
Name: "Some Name.",
},
],
{
token: "BQAVhYiUweHGTTlIIZHthAKzulZ-DHg",
},
],
};
let data = req.body;
let token = "";
for (let each of data) {
if (each.hasOwnProperty("token")) {
token = each["token"];
break;
}
}
console.log(token)

Creating a Object with same Structure than received json

Hola Developers im trying to create a product in my shopping card , but still im stacked in one issue :
Can't find the proper way to design a object just on the same way i receive it from my json (back-end).
Lets say the part is causing the issue is this:
JSON RECEIVED
"product_category": [
{
"categories_of_product": "Good"
},
{
"categories_of_product": "Danger"
},
{
"categories_of_product": "Homer"
}
],
"people_buying_this_product": "Jack Ripper"
},
]
then on my building-product-processs , on the data return is a section that have to do with this, where in then using checkboxes i get which checkbox is checked or not , in order to build a array of categories similar to the former one i have shown:
DATA RETURN
ProductAdded: {
description: "",
upload_image3: "",
upload_image2: "",
upload_image1: "",
unities: 0,
price: 0,
name: "",
Categories: [
{ id: 1, value: "Miscellaneous", selected: false },
{ id: 2, value: "Homer", selected: false },
{ id: 3, value: "Electronic", selected: false },
{ id: 4, value: "Internet", selected: true },
{ id: 5, value: "Kids", selected: false },
{ id: 6, value: "Donas", selected: true },
{ id: 7, value: "Sports", selected: true },
{ id: 8, value: "Horror", selected: false }
],
METHOD that dispatches de action in vuex
addProductOnSale(thisCurrent) {
this.$store.dispatch("addProductSale", this.ProductAdded);
}
then being already in the VUEX state management , on the action in fact , trying to build the new product for this product category, i set this:
addProductSale({commit,getters},currentProduct){
product_category: currentProduct.Categories.filter(option =>
option.selected).map(option => {categories_of_product: option.value})
}
------------------->this one gives me undefined like:
"product_category":
[
undefined
],
"product_category":
[
undefined
],
"product_category":
[
undefined
],
]
or tried this other :
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.forEach( option.selected,() =>
option.value).map(option => option.selected),...
}
and gave me error , not even showing a result.
Basically cant find the way to design the same structure im receiving for json , nor even reaching to values.
Is weird ,but if i only set the query like this:
addProductSale({commit,getters},currentProduct){
product_category:currentProduct.Categories.filter(option => option.selected)
}
Indeed filters and gives back the objects inside Categories which commit the condition of selected true , but with its plain format just as the data returns , but that's not the idea.
Any advice or help?
Thanks in advance!!!!

ApostropheCMS: How do I populate the _children key under apostrophe-pages when there are in fact children?

This question is the same as asked here, but the only answer is something I had already tried by following the docs to no avail. I need to access 4 levels deep of pages. I currently have the following included in my lib/modules/apostrophe-pages/index.js:
addFields: [
{
name: '_pages',
type: 'joinByArray',
withType: 'apostrophe-page',
label: 'Pages',
idsField: 'pageIds',
filters: {
children: {
depth: 4,
areas: false
},
projection: {
title: 4,
slug: 4,
rank: 4,
level: 4,
path: 4
}
}
}
]
I even tried passing '1' as it says to do in the docs and still only returns an empty array under the "_children" key when logging out data.
and I have the following in my app.js file:
'apostrophe-pages': {
filters: {
ancestors: {
children: {
depth: 4
}
},
children: {
depth: 4
}
},
No matter what it's still empty. How can I get the _children key to populate accurately as my navigation tree shows?

Show nested values in chart with groups using c3.js

I have a block of JSON data looking like this:
{
date: '2014-01-01',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-02',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-03',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}, {
date: '2014-01-04',
data: [
{
name: "Janos",
work: 3,
drive: 5
},
{
name: "Jelle",
work: 4,
drive: 2
}
]
}
And I want a line chart with an x axis based on the date key, and columns based on the given names in the data arrays for each item.
So for each person I want to show the work and drive value.
This is what I'm trying to achieve (in case I don't make any sense):
Achieved this screenshot by using inspect element
I hope my question makes sense, I can't seem to make it work with the available documentation.
Please leave a comment if I'm not clear enough.
Thanks in advance!

Make pretty nested hierarchy from the input array of objects [duplicate]

This question already has answers here:
Build tree array from flat array in javascript
(34 answers)
Javascript: Building a hierarchical tree
(6 answers)
Closed 5 years ago.
I'm trying to make build nested hierarchy from the defined input data, and I`m faced some problem with the deep level hierarchy. So, as an input there is array of objects, looks like this:
[
{
id: 1,
parentId: 1,
},
{
id: 2,
parentId: 1,
},
{
id: 3,
parentId: 2,
},
{
id: 4,
parentId: 3,
},
...
]
Every element has his own id and parentId.
As outcome, I want to have the structure, grouped by the parent id's, smth like this:
{
id: 1,
sub: [
{
id: 2,
parentId: 1,
sub: [
{
id: 3,
parenId: 2,
},
....
],
},
],
}
So, the problem is how to build algorithm that will recursively goes through this input data, and build such structured outcome? When I know the level of hierarchy, I could build algorithm with defined level of nested loops, but the problem is with unknown number of deeper.

Categories

Resources