How to destructure all of the objects from the nested arrays?

Question

An array containing objects with attributes that have nested arrays containing more objects with attributes in it.

const courses = [
  {
    name1: 'Half Stack application develop',
    id: 1,
    parts: [
      {
        name: 'Fundamentals of React',
        exercises: 10,
        id: 1
      },
      {
        name: 'Using props to pass data',
        exercises: 7,
        id: 2
      },
      {
        name: 'State of a component',
        exercises: 14,
        id: 3
      },
      {
        name: 'Redux',
        exercises: 11,
        id: 4
      }
    ]
  }, 
  {
    name1: 'Node.js',
    id: 2,
    parts: [
      {
        name: 'Routing',
        exercises: 3,
        id: 1
      },
      {
        name: 'Middlewares',
        exercises: 7,
        id: 2
      }
    ]
  },
]

So far I can only get the attributes of the first object from the nested arrays. But I would need all of the others objects. It works well for the parent array even when updating the array, but not for the children arrays containing the objects.

for (const {
  name1: n,
  parts: [{ name: n2, exercises: ex }],
} of courses) {
  console.log(`${n}:
  ${n2} ${ex}`);
}

ACTUAL RESULT: Half Stack application development: Fundamentals of React 10 Node.js: Routing 3

EXPECTED RESULT:

Half Stack application development: Fundamentals of React 10 Using props to pass data 7 State of a component 14 Redux 11

Node.js: Routing 3 Middlewares 7

to read better can you fix the first array – egemenakturk Feb 22 '23 at 12:58 — egemenakturk, Feb 22 '23 at 12:58

T.J. Crowder · Accepted Answer · 2023-03-04T12:58:56.610

How to destructure all of the objects from the nested arrays?

To do that, you'd have to know how many elements were in the arrays, so you knew how many elements to use in your destructuring pattern. But your arrays are of varying length, so you can't do that.

Instead, just grab the arrays themselves, then (if needed) do some destructuring when you use those arrays:

for (const { name1, parts } of courses) {
    console.log(`${name1}:`);
    for (const {name, exercises} of parts) {
        console.log(`* ${name}: ${exercises}`);
    }
}

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
for (const { name1, parts } of courses) {
    console.log(`${name1}:`);
    for (const {name, exercises} of parts) {
        console.log(`* ${name}: ${exercises}`);
    }
}

.as-console-wrapper {
    max-height: 100% !important;
}

That's just one example of how you'd use the parts array, of course. You could do anything with it you liked, such as creating a string:

for (const { name1, parts } of courses) {
    const partsString = parts.map(({name, exercises}) =>
        `${name}: ${exercises}`
    ).join(", ");
    console.log(`${name1}: ${partsString}`);
}

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
for (const { name1, parts } of courses) {
    const partsString = parts.map(({name, exercises}) =>
        `${name}: ${exercises}`
    ).join(", ");
    console.log(`${name1}: ${partsString}`);
}

.as-console-wrapper {
    max-height: 100% !important;
}

Or you can use map to create a new array (perhaps with the course name, part name, and exercises) to pass to some other code (such as a React component, as you mentioned in a comment):

const result = courses.map(({ name1, parts }) =>
    parts.map(({ name, exercises }) => ({
        course: name1,
        name,
        exercises,
    }))
);

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
const result = courses.map(({ name1, parts }) =>
    parts.map(({ name, exercises }) => ({
        course: name1,
        name,
        exercises,
    }))
);
console.log(JSON.stringify(result, null, 4));

.as-console-wrapper {
    max-height: 100% !important;
}

Or with map, again, create an array of objects with nested parts:

const result = courses.map(({ name1, parts }) => ({
    course: name1,
    parts: parts.map(({ name, exercises }) => ({ name, exercises })),
}));

const courses = [ { name1: "Half Stack application developm", id: 1, parts: [ { name: "Fundamentals of React", exercises: 10, id: 1 }, { name: "Using props to pass data", exercises: 7, id: 2 }, { name: "State of a component", exercises: 14, id: 3 }, { name: "Redux", exercises: 11, id: 4 }, ], }, { name1: "Node.js", id: 2, parts: [ { name: "Routing", exercises: 3, id: 1 }, { name: "Middlewares", exercises: 7, id: 2 }, ], }, ];
const result = courses.map(({ name1, parts }) => ({
    course: name1,
    parts: parts.map(({ name, exercises }) => ({ name, exercises })),
}));
console.log(JSON.stringify(result, null, 4));

.as-console-wrapper {
    max-height: 100% !important;
}

Or tweak/adjust as necessary.

Thank you a lot for your answer! It works in the console. But i need it to store in a variable and then pass that variable as {props.var} inside the return section of my App in react.all I need to how to store that for of loop in a variable and be able to console.log outside the loop. — Daniel, Mar 04 '23 at 12:21
and the property name: "name1" from the outter objects, actually has the property name: "name". It has the same name property as the ones from the inner objects. when mapping there are properties names being the same, but in different objects. Thank you very much — Daniel, Mar 04 '23 at 12:23
@Daniel - I've added a few more examples, you should be able to generalize from there. — T.J. Crowder, Mar 04 '23 at 12:59

How to destructure all of the objects from the nested arrays?

1 Answers1