Loop and render data from 3 levels deep Array of Objects

Question

I'm consuming the following dataset from an external source, which contains a 3 level deep array of objects.

const data = [
{name: "Molly", description: [
  {children: [{text: "Likes to run"}] },
  {children: [{text: "Likes ice cream"}]},
  {children: [{text: "Likes to cars"}] }
]},
{name: "Jay", description: [
  {children: [{text: "Likes to race bikes"}]},
  {children: [{text: "Likes cake"}]},
  {children: [{text: "Likes shoes"}]}
]}
]

I'm wondering if there's an elegant/smarter way to loop over all the array of objects all the way to the text object so I could render its string value.

I'm looking for a vanilla JS solution where I don't end up with several map() functions chained together.

the end result would be to retrieve the text data and render it on a React component such as:

const UserList({ data }) {
  return (
    <div>
      {data.map((user) => (
        <SingleUser user={user} />
      ))}
    </div>
  );
}
 
const SingleUser = ({user}) => {

const userDescription = // loop over and transform to render the text data here
return(
 <>
   <div>{user.name}</div> 
   <div>{userDescription}</div>
 </>
)
}

Each name have array with three text. Do what's text you like get? First or all ? — Renato Sant'Anna
– Renato Sant'Anna, Commented Dec 15, 2020 at 18:36
I'd like to get all of them and render each inside the separate </div> — Null isTrue
– Null isTrue, Commented Dec 15, 2020 at 18:39

Shreevardhan · Accepted Answer · 2020-12-15 18:35:04Z

4

You can use flatMap to simplify it a bit, for example

const data = [
{name: "Molly", description: [
  {children: [{text: "Likes to run"}] },
  {children: [{text: "Likes ice cream"}]},
  {children: [{text: "Likes to cars"}] }
]},
{name: "Jay", description: [
  {children: [{text: "Likes to race bikes"}]},
  {children: [{text: "Likes cake"}]},
  {children: [{text: "Likes shoes"}]}
]}
];

const flattenedData = data.map(item => ({
  ...item,
  description: item.description.flatMap(el => el.children[0].text)
}));

console.log(flattenedData);

edited Dec 15, 2020 at 18:35

answered Dec 15, 2020 at 18:29

Shreevardhan

12.7k3 gold badges39 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Null isTrue Over a year ago

this is cool - for my understanding, how come we only pass the first index of children? i.e. el.children[0].text

Ajay Gupta Over a year ago

The second parameter of the map method is the index, so instead of using [0] you can use the [index] there.

Renato Sant'Anna · Accepted Answer · 2020-12-15 19:31:11Z

Use flatMap to simplify a matrix, then use the map in the User component to show the text of the descriptions

const data = [
    {name: "Molly", description: [
      {children: [{text: "Likes to run"}] },
      {children: [{text: "Likes ice cream"}]},
      {children: [{text: "Likes to cars"}] }
    ]},
    {name: "Jay", description: [
      {children: [{text: "Likes to race bikes"}]},
      {children: [{text: "Likes cake"}]},
      {children: [{text: "Likes shoes"}]}
    ]}
    ];
    
    const userData = data.map(item => ({
      ...item,
      description: item.description.flatMap(x => x.children[0].text)
    }));
  
  
  const UserList({ userData }) {
      return (
        <div>
          {userData.map((user) => (
            <SingleUser user={user} />
          ))}
        </div>
      );
    }
     
    const SingleUser = ({user}) => {
    
    const userDescription = // loop over and transform to render the text data here
    return(
     <>
       <div>{user.name}</div> 
   {
     userData.description.map(text => { 
           <div>{text}</div>
     });
   }
     </>
    )
    }

cape_bsas · Accepted Answer · 2020-12-16 03:22:28Z

4

Inspiered in the @Shreevardhan answer but considering every element of the childrens arrays

const data = [
{name: "Molly", description: [
  {children: [{text: "Likes to run"},{text: "To run very fast!"}] },
  {children: [{text: "Likes ice cream"}]},
  {children: [{text: "Likes to cars"}] }
]},
{name: "Jay", description: [
  {children: [{text: "Likes to race bikes"}]},
  {children: [{text: "Likes cake"}]},
  {children: [{text: "Likes shoes"}]}
]}
];

const flattenedData = data.map(item => ({
  ...item,
  description: item.description.flatMap(el => el.children).map(_el => _el.text)
}));

console.log(flattenedData);

edited Dec 16, 2020 at 3:22

answered Dec 15, 2020 at 18:50

cape_bsas

7085 silver badges14 bronze badges

3 Comments

Null isTrue Over a year ago

this awesome, and covers the ground in case the children receive more than 1 item. How come you had to flatMap twice?

Ajay Gupta Over a year ago

They are applying the second flatMap on the array returned from the first flatMap. Kind of a shorthand to bypass creating an extra variable.

cape_bsas Over a year ago

Actually the second one is a regular map, I've corrected it...

dreamcrash · Accepted Answer · 2020-12-22 08:43:53Z

2

const data = [
{name: "Molly", description: [
  {children: [{text: "Likes to run"}] },
  {children: [{text: "Likes ice cream"}]},
  {children: [{text: "Likes to cars"}] }
]},
{name: "Jay", description: [
  {children: [{text: "Likes to race bikes"}]},
  {children: [{text: "Likes cake"}]},
  {children: [{text: "Likes shoes"}]}
]}
];

let result = data.reduce( (acc, currentObj) => {
  let obj = {};
  obj.name = currentObj.name;
  obj.description = currentObj.description.reduce( (inneracc, innerObj) =>  inneracc.concat(innerObj.children[0].text), [])
  return acc.concat(obj);
}, [])
console.log(result)

We can achieve this using .reduce() and .concat() methods too. For more info, check out this link Array.prototype.reduce().

edited Dec 22, 2020 at 8:43

dreamcrash

52.5k26 gold badges114 silver badges138 bronze badges

answered Dec 21, 2020 at 15:35

Hari Bharathi

4515 silver badges8 bronze badges

Collectives™ on Stack Overflow

Loop and render data from 3 levels deep Array of Objects

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related