Develop Reference

How do i extract an array in an array to get another array? [duplicate]

This question already has answers here:
Javascript reduce and map on nested array of objects
(2 answers)
Closed 11 months ago.
How do I extract the array in an array and structure it to be one whole array?
Input:
const input = [{
categoryName: "Chinese food",
tabs: [{
header: "Chicken Rice",
content: "Hainanese chicken rice is a dish of poached chicken and seasoned rice"
},
{
header: "Dim sum",
content: "large range of small Chinese dishes that are traditionally enjoyed in restaurants"
}
]
},
{
categoryName: "Italian food",
tabs: [{
header: "Pizza",
content: "Dish of Italian origin consisting of a usually round"
}]
},
]
Output (Need to extract all the headers out to become this array)
const output = [
{
"categoryName": "Chinese food",
"header": "Chicken Rice",
},
{
"categoryName": "Chinese food",
"header": "Dim sum",
},
{
"categoryName": "Italian food",
"header": "Pizza"
},
]
tried this but i can't seem to add categoryName inside
const getHeadersWithId = arr => (
arr.flatMap( // iterate over 'input' array and 'flat'-ten the result
({tabs}) => (tabs.map( // de-structure 'tabs' & iterate over it
({header}) => ({header}) // de-structure 'header' & retain it to intermediate-result array
))
).map(
({header}, idx) => ({ // iterate with index 'idx'
id: idx+1, // generate the 'id' and store
header // header from intermediate-result array element
})
)
);
This is what I got when I run this chunk of code
[
{
"id": 1,
"header": "Chicken Rice"
},
{
"id": 2,
"header": "Dim sum"
},
{
"id": 3,
"header": "Pizza"
}
]

You don't need the second map() in my opinion. Just use the categoryName and pass it into your inner map().
Building up on your code:
const input = [{
categoryName: "Chinese food",
tabs: [{
header: "Chicken Rice",
content: "Hainanese chicken rice is a dish of poached chicken and seasoned rice"
},
{
header: "Dim sum",
content: "large range of small Chinese dishes that are traditionally enjoyed in restaurants"
}
]
},
{
categoryName: "Italian food",
tabs: [{
header: "Pizza",
content: "Dish of Italian origin consisting of a usually round"
}]
},
]
const getHeadersWithId = arr => (
arr.flatMap( // iterate over 'input' array and 'flat'-ten the result
({tabs,categoryName}) => tabs.map( // de-structure 'tabs' & iterate over it
({header}) => ({header,categoryName}) // de-structure 'header' & retain it to intermediate-result array
)
)
);
console.log(getHeadersWithId(input));

Displaying data inside an array inside an object with React

I have some data in a separate JS file called data.js
export default [
{
info: [
{
cardOne: [
{
division: "Company Division",
infotext: "Some Text",
cta: "Story Information",
},
],
},
{
cardTwo: [
{
division: "Rec Division",
infotext: "Some Text",
cta: "Story Information",
},
],
},
{
cardThree: [
{
division: "Professional Division",
infotext: "Some Text",
cta: "Story Information",
},
],
},
],
},
]
In a component I want to display the division of cardOne.
Is there a way to access and display just the division of CardOne and display that?

Yes, you can by calling .map on just the cardOne array in your data.
const data = 'location of your exported data';
data['info'][0]['cardOne'].map((card) => (
JSX here
))

If you just want the division of cardOne you can access it like this:
import * as data from "./data"
<h1>{data.default[0].info[0].cardOne[0].division}</h1>

Angularjs JSON treeview, json format issue

I'm trying to implement a JSON treeview with this plugin
My issue is this line :
$scope.structure = { folders: [
{ name: 'Folder 1', files: [{ name: 'File 1.jpg' }, { name: 'File 2.png' }], folders: [
{ name: 'Subfolder 1', files: [{ name: 'Subfile 1' }] },
{ name: 'Subfolder 2' },
{ name: 'Subfolder 3' }
]},
{ name: 'Folder 2' }
]};
In my case, I'm reading a file that returns me a JSON format
[
{
"item": {
"title": "Kids"
},
"children": [
{
"item": {
"title": "HELLO"
},
"children": []
}
]
}
]
I thought using JSON.parse(myFileContent) should have been enough for having the same data structure as in the $scope.structure but the data isn't displaying, i'm not getting errors.
How can I parse my file content to make it work ?

First, the structure should be an object, since the directive differentiates "folders" from "files". So, considering you already define child elements inside a children property, you could wrap your array (assuming it's called content) into an object like so:
$scope.structure = {
"children": content
};
Then, you'll need to override the default values for the property names in which the directive will try to get the values.
$scope.structureOptions = {
foldersProperty: "children",
displayProperty: "item.title"
};
And last, you add the tree-view-options attribute to the HTML element.
<div tree-view="structure" tree-view-options="structureOptions"></div>

Using first object's value to find corresponding value in second object

I'm using JSON Path parser to parse some data. Here is an example of the source data:
{
"people": [
{
"initials": "RF",
"sport": "T"
},
{
"initials": "LM",
"sport": "F"
}
],
"definitions": {
"RF": {
"def_1": "Roger Federer",
"def_2": "Roger"
},
"LM": {
"def_1": "Lionel Messi",
"def_2": "Lionel"
},
"T": {
"def_1": "Tennis"
},
"F": {
"def_1": "Football"
}
}
}
Now, if I use only the array (people), it's almost useless, RF and T doesn't mean much. However, in the object (definitions) they are defined. RF means Roger Federer and T is Tennis, so I need to import those two as well. I can easily import RF and T, but I'm struggling to find a query to connect RF and T to Roger Federer and Tennis.
First I need to specify context (root) and then names of the objects. Here is an example:
Context: $.[]
Query: initials
Result is: RF
When I import all of this in a node, this example works well to import array (people) data.
This is what I can successfully import now:
Field1 value: RF
Field2 value: T
What I need:
Field1 value: RF
Field2 value: T
**Field4 value: Roger Federer**
**Field5 value: Tennis**
Basically, I want to describe better what I get from the people array. This is one of the combinations that I have tried, but it doesn't work:
Context: $.[]
Query: initials.def_1
Query: people.initials.def_1
Is there a way to achieve this?

XPath sounds like overkill for such a simple data structure. Perhaps there are other reasons you need to use XPath, but this is really easy in pure JavaScript. For example:
var data = {
"people": [
{
"initials": "RF",
"sport": "T"
}, {
"initials": "LM",
"sport": "F"
}
],
"definitions": {
"RF": {
"def_1": "Roger Federer",
"def_2": "Roger"
},
"LM": {
"def_1": "Lionel Messi",
"def_2": "Lionel"
},
"T": {
"def_1": "Tennis"
},
"F": {
"def_1": "Football"
}
}
};
data.people.forEach( function( person ) {
var name = data.definitions[person.initials].def_1;
var sport = data.definitions[person.sport].def_1;
console.log( name, 'plays', sport );
});
Logs:
Roger Federer plays Tennis
Lionel Messi plays Football

Extract from nested attribute

I have the following model attributes:
[{
"id": 1,
"details": {
"name": "Sun Tzu",
"height": "180",
},
"lists": [
[{
"coworkers": "company cool",
"friends": "School",
}],
[{
"coworkers": "company nice",
"friends": "Childhood",
}]
]
}]
Yes, I know it is confusing but I am trying to understand nested models.
I want to display in a view (a table row), all the friends of id:1 model.
For example: School, Childhood.
How do I do that?
Thanks in advance!

var friends = _.chain(data)
.findWhere({ id: 1 })
.result('lists')
.flatten(false)
.pluck('friends')
.value();

You can chain functions to get the output you are looking for
console.log(_.chain(data)
.find(function(currentObject) {
return currentObject.id === 1;
})
.pick("lists")
.flatten(false)
.pluck("friends")
.value());
Output
[ 'School', 'Childhood' ]