Issues re-indexing items in a nested object array

Question

I have an object array with the following structure:

[
  {
    "id": 1,
    "uid": "card-vwy733s3rC",
    "body": {
      "text": "Test"
    },
    "type": 0,
    "button": [
      {
        "uid": "button-tFDHsmExnx",
        "title": "Get Started",
        "event": [
          {
            "id": 2,
            "action": 5,
            "value": "https://en.wikipedia.org/wiki/Educational_technology"
          },
          {
            "id": 2,
            "action": 5,
            "value": "https://en.wikipedia.org/wiki/Educational_technology"
          }
        ],
        "isEnabled": true
      }
    ],
    "audio": {
      "uid": "audio-NVBK0U6BXE",
      "url": "https://s3.eu-west-2.amazonaws.com/media.testing.co.uk/default/testing_startup_ideas.mp3"
    }
  }
]

I would like to re-index the value at button -> event -> id on occasion, provided the topmost uid matches. This means that the two 2's become 1 and 2. However, when I run my method below, it doesn't work, and it returns an identical id's for all the items in the button -> event array:

  static resetCourseContentButtonEventIndexes(
    courseContent: ICourseContent[],
    selectedCourseContentUid: string
  ): ICourseContent[] {
    for (let i = 0; i < courseContent.length; i++) {
      if (courseContent[i].uid === selectedCourseContentUid) {
        for (let j = 0; j < courseContent[i].button.length; j++) {
          for (let k = 0; k < courseContent[i].button[j].event.length; k++) {
            courseContent[i].button[j].event[k].id = k + 1;
          }
        }
      }
    }
    return courseContent;
  }

I'm confused about why this is happening, how can I fix it?

I call it from another method:

static cloneCourseContentButtonEventByIndex(
    courseContent: ICourseContent[],
    selectedCourseContentUid: string,
    selectedCourseElementUid: string,
    courseContentButtonEventIndex: number
  ) {
    for (let i = 0; i < courseContent.length; i++) {
      if (courseContent[i].uid === selectedCourseContentUid) {
        for (let j = 0; j < courseContent[i].button.length; j++) {
          if (courseContent[i].button[j].uid === selectedCourseElementUid) {
            courseContent[i].button[j].event.push(
              courseContent[i].button[j].event[courseContentButtonEventIndex]
            );
          }
        }
      }
    }
    return JSON.parse(
      JSON.stringify(
        this.resetCourseContentButtonEventIndexes(courseContent, selectedCourseContentUid)
      )
    );
  }

Yea this is intentional, I am trying to reset it so that they become 1, and 2 respectively by passing it into resetCourseContentButtonEventIndexes — methuselah
– methuselah, Commented Jan 18, 2021 at 22:17
It's working for me as is. Have you narrowed down where the problem may lie? — pilchard
– pilchard, Commented Jan 18, 2021 at 22:25
No idea, I call it from another method (where the button event is cloned). Could that be the issue? I've included it above. — methuselah
– methuselah, Commented Jan 18, 2021 at 22:27
yeh, for me it also works, maybe you have a typo in the second argument of the method). Could you console.log the arguments of the method? — Oleksandr Sakun
– Oleksandr Sakun, Commented Jan 18, 2021 at 22:29
yes, you are pushing a reference to the object here : courseContent[i].button[j].event.push(courseContent[i].button[j].event[courseContentButtonEventIndex]);, instead clone the object as you push courseContent[i].button[j].event.push({...courseContent[i].button[j].event[courseContentButtonEventIndex]}); — pilchard
– pilchard, Commented Jan 18, 2021 at 22:30

pilchard · Accepted Answer · 2021-01-18 22:39:18Z

1

You are pushing references to a single event object in your cloneCourseContentButtonEventByIndex() method in this line...

courseContent[i].button[j].event.push(
              courseContent[i].button[j].event[courseContentButtonEventIndex]
            );

To avoid this problem clone the object before pushing it using the spread syntax

courseContent[i].button[j].event.push(
              {...courseContent[i].button[j].event[courseContentButtonEventIndex]}
            );

edited Jan 18, 2021 at 22:39

answered Jan 18, 2021 at 22:37

pilchard

13.1k5 gold badges14 silver badges27 bronze badges

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

2 Comments

methuselah Over a year ago

Thanks that fixed it. Pretty odd. But I'll keep it in mind for next time.

pilchard Over a year ago

Glad it helped.

Collectives™ on Stack Overflow

Issues re-indexing items in a nested object array

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related