What is the best way to access and modify a nested object within a complex object containing an array of objects?

Question

What is the best way to access and modify a nested object within a complex object containing an array of objects?

I've got the course structure all sorted out, but I'm struggling to understand how to retrieve a lesson object by its ID and also update a lesson object with new property values.

If anyone could provide some guidance on the right approach, it would be greatly appreciated.

{
   id: 1,
   name: 'A Fantastic Course',
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla porttitor lorem vel turpis congue euismod.',
   sections: [
      {
         id: 1,
         sort_order: 1,
         name: 'Section one',
         lessons: [
            {
               id: 1,
               sort_order: 1,
               name: 'Lesson One'
            },
            {
               id: 3,
               sort_order: 2,
               name: 'Lesson Three'
            },
            {
               id: 2,
               sort_order: 3,
               name: 'Lesson Two'
            }
         ]

      },
      {
         id: 2,
         sort_order: 2,
         name: 'Section Two',
         lessons: [
            {
               id: 4,
               sort_order: 1,
               name: 'Lesson Four'
            },
            {
               id: 5,
               sort_order: 2,
               name: 'Lesson Five'
            },
            {
               id: 6,
               sort_order: 3,
               name: 'Lesson Six'
            }
         ]
      }
   ]
}

javascript ecmascript-6 javascript-objects

Answer 1

Answer №1

const obj = {
   id: 1,
   name: 'An Incredible Class',
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et justo odio.',
   sections: [
      {
         id: 1,
         sort_order: 1,
         name: 'First Section',
         lessons: [
            {
               id: 1,
               sort_order: 1,
               name: 'Lesson A'
            },
            {
               id: 3,
               sort_order: 2,
               name: 'Lesson C'
            },
            {
               id: 2,
               sort_order: 3,
               name: 'Lesson B'
            }
         ]

      },
      {
         id: 2,
         sort_order: 2,
         name: 'Second Section',
         lessons: [
            {
               id: 4,
               sort_order: 1,
               name: 'Lesson D'
            },
            {
               id: 5,
               sort_order: 2,
               name: 'Lesson E'
            },
            {
               id: 6,
               sort_order: 3,
               name: 'Lesson F'
            }
         ]
      }
   ]
}

const lessons = [].concat.apply([], Object.values(obj.sections).map(section => section.lessons))

const id = //pick one

const selected = lessons.find(lesson => lesson.id === id)

You may want to experiment with a method like this to flatten the object and store the course and section IDs along with each lesson for easy access.

[].concat.apply([], Object.values(obj.sections).map(section => 
  section.lessons.map(lesson => ({
    ...lesson,
    courseId: obj.id,
    sectionId: section.id
  }))
))

Answer 2

const obj = {
   id: 1,
   name: 'An Incredible Class',
   description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et justo odio.',
   sections: [
      {
         id: 1,
         sort_order: 1,
         name: 'First Section',
         lessons: [
            {
               id: 1,
               sort_order: 1,
               name: 'Lesson A'
            },
            {
               id: 3,
               sort_order: 2,
               name: 'Lesson C'
            },
            {
               id: 2,
               sort_order: 3,
               name: 'Lesson B'
            }
         ]

      },
      {
         id: 2,
         sort_order: 2,
         name: 'Second Section',
         lessons: [
            {
               id: 4,
               sort_order: 1,
               name: 'Lesson D'
            },
            {
               id: 5,
               sort_order: 2,
               name: 'Lesson E'
            },
            {
               id: 6,
               sort_order: 3,
               name: 'Lesson F'
            }
         ]
      }
   ]
}

const lessons = [].concat.apply([], Object.values(obj.sections).map(section => section.lessons))

const id = //pick one

const selected = lessons.find(lesson => lesson.id === id)

You may want to experiment with a method like this to flatten the object and store the course and section IDs along with each lesson for easy access.

[].concat.apply([], Object.values(obj.sections).map(section => 
  section.lessons.map(lesson => ({
    ...lesson,
    courseId: obj.id,
    sectionId: section.id
  }))
))

Answer 3

Answer №2

Here is a simple function to find a lesson by its ID.


function searchLessonById(id){
    let result;
    const lessonValues = Object.values(lessons);

    lessonValues.filter(x => Array.isArray(x) ? x.forEach(y => y.lessons.find(z => z.id == id ? result = z.name : null)) : null);
    
    return result;
}

console.log(searchLessonById(3));

Answer 4

Here is a simple function to find a lesson by its ID.


function searchLessonById(id){
    let result;
    const lessonValues = Object.values(lessons);

    lessonValues.filter(x => Array.isArray(x) ? x.forEach(y => y.lessons.find(z => z.id == id ? result = z.name : null)) : null);
    
    return result;
}

console.log(searchLessonById(3));

What is the best way to access and modify a nested object within a complex object containing an array of objects?

Answer №1

Answer №2

Similar questions

"RecognitionAudio variable missing" and "InactiveRpcError occurred" [Utilizing the Google text-to-speech API]

The ng-model in Angular is unable to capture the initial input value on load

Working with AngularJS: Accessing a JSON file from the local directory

Is it possible to execute a function defined within an eval() function using setInterval()?

Trouble with NodeJS NPM

Tips for resizing an image to perfectly fit on a compact HTML5 canvas without sacrificing its quality

Different conversations are taking place concurrently. How can we determine which one is currently being attended to

Is it feasible to execute a cross-site request forgery attack on a URL that delivers a JSON object as a response?

Interactive feature allowing all embedded YouTube videos on a webpage to play synchronously, with sound disabled, and on a continuous loop

Is it possible to use multiple schemas for one collection name?

Interested in compressing CSS and JavaScript using PHP, but uncertain about the impact on performance and the best methods to implement it?

Addressing Equity Concerns within JavaScript Programming

Utilizing the URLSearchParams object for fetching data in React

What is causing the ajax code to malfunction?

Update the parent element's class style within a targeted div media query

When dynamically adding input fields in Bootstrap, there is a smaller gap between inline inputs

What is an effective method for coordinating JQuery animations simultaneously?

How come I am unable to pass JavaScript values to my PHP5 code?

Encountering an issue with a loop in my jQuery function - any solutions?

What strategies can I implement to prevent security alerts in Internet Explorer 8 when accessing Google Maps via a secure connection