Exploring the depths of nested object arrays

Question

Exploring the depths of nested object arrays

I'm really struggling to complete a FullStackOpen exercise that requires rendering data to the page. With the following code, I need to display the number of Parts each Course has and also reduce the number of Exercises/Parts to show the total exercises for each Course.

I'm having difficulty accessing the inside of the Parts array of objects.

    {
      name: "Half Stack application development",
      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,
        },
      ],
    },
    {
      name: "Node.js",
      id: 2,
      parts: [
        {
          name: "Routing",
          exercises: 3,
          id: 1,
        },
        {
          name: "Middlewares",
          exercises: 7,
          id: 2,
        },
      ],
    },
  ];

javascript arrays object nested

Answer 1

Answer №1

Breaking it down is not that challenging, here's the process for each individual element within the array:

The quantity of parts can be determined by accessing currentElement.parts.length
The total number of exercises can be calculated utilizing the Array.reduce method

const data = [
  {
    name: "Full Stack web development course",
    id: 1,
    parts: [{
        name: "JavaScript Basics",
        exercises: 15,
        id: 1,
      },
      {
        name: "Using Express middleware",
        exercises: 8,
        id: 2,
      },
      {
        name: "Backend with MongoDB",
        exercises: 12,
        id: 3,
      },
    ],
  },
  {
    name: "React Framework",
    id: 2,
    parts: [{
        name: "State management in React",
        exercises: 6,
        id: 1,
      },
      {
        name: "Hooks and effects",
        exercises: 9,
        id: 2,
      },
    ],
  },
];

const result = []

for (const program of data) {
  const tempObject = {
    programName: program.name,
    parts: program.parts.length,
    exercises: program.parts.reduce((a,b) => a + b.exercises, 0)
  }
  
  result.push(tempObject)
}

console.log(result)

Answer 2

Breaking it down is not that challenging, here's the process for each individual element within the array:

The quantity of parts can be determined by accessing currentElement.parts.length
The total number of exercises can be calculated utilizing the Array.reduce method

const data = [
  {
    name: "Full Stack web development course",
    id: 1,
    parts: [{
        name: "JavaScript Basics",
        exercises: 15,
        id: 1,
      },
      {
        name: "Using Express middleware",
        exercises: 8,
        id: 2,
      },
      {
        name: "Backend with MongoDB",
        exercises: 12,
        id: 3,
      },
    ],
  },
  {
    name: "React Framework",
    id: 2,
    parts: [{
        name: "State management in React",
        exercises: 6,
        id: 1,
      },
      {
        name: "Hooks and effects",
        exercises: 9,
        id: 2,
      },
    ],
  },
];

const result = []

for (const program of data) {
  const tempObject = {
    programName: program.name,
    parts: program.parts.length,
    exercises: program.parts.reduce((a,b) => a + b.exercises, 0)
  }
  
  result.push(tempObject)
}

console.log(result)

Answer 3

Answer №2

If you wish to determine the total number of exercises for each course, you will first need to iterate through each course by name; then, for each list of parts, calculate the total exercise count.

const main = () => {
  const courseData = courses.map(({ name, parts }) => ({
    name,
    parts: parts.length,
    exercises: parts.reduce((sum, { exercises }) => sum + exercises, 0)
  }));
  
  console.log(courseData);
};

const courses = [{
  name: "Half Stack application development",
  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 }
  ],
}, {
  name: "Node.js",
  id: 2,
  parts: [
    { name: "Routing"     , exercises: 3 , id: 1 },
    { name: "Middlewares" , exercises: 7 , id: 2 }
  ],
}];

main();

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

Answer 4

If you wish to determine the total number of exercises for each course, you will first need to iterate through each course by name; then, for each list of parts, calculate the total exercise count.

const main = () => {
  const courseData = courses.map(({ name, parts }) => ({
    name,
    parts: parts.length,
    exercises: parts.reduce((sum, { exercises }) => sum + exercises, 0)
  }));
  
  console.log(courseData);
};

const courses = [{
  name: "Half Stack application development",
  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 }
  ],
}, {
  name: "Node.js",
  id: 2,
  parts: [
    { name: "Routing"     , exercises: 3 , id: 1 },
    { name: "Middlewares" , exercises: 7 , id: 2 }
  ],
}];

main();

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

Exploring the depths of nested object arrays

Answer №1

Answer №2

Similar questions

Why is useEffect being executed twice?

Translating from JavaScript to Objective-C using JSON

Selenium and Python encountered an ElementNotInteractableException, indicating that the element was not interactable when inserting a value

Troubleshooting issue with node.js 13 import functionality

[entity: undefined prototype] { type: 'clip', info: 'Watch my latest video!!' } using nodejs - multer

Tips on displaying hyperlinks within a text area in an Angular application

Nested Add and Remove using Jquery

Locate all posts associated with the specified User ID

When using react-router-dom, a blank page may appear for routes that contain more than one path segment followed by a single forward slash "/"

Ways to display map results in multiple columns utilizing react

Tips for displaying a div near the cursor's location when hovering in React JS

Sending both the minimum and maximum slider values to PHP using POST can be achieved by formatting the data correctly

Creating a file solely for route definitions and then employing them within index.js

Utilizing Ajax to upload various files from separate input sources simultaneously

Tips for shifting a fabricjs element generated within a nextjs useState hook?

Master the art of navigating the Windows Sound Recorder with the power of JavaScript

Issue: Utilized more hooks than in the previous render cycle

I need to change a website into a string so that I can analyze it with javascript. How can I do this?

Conditional styling in React class components depending on the props provided

What might prevent an onSubmit event from triggering the execution of "checkTheForm()"?