Exploring the wonders of nested object destructuring in ES6

Question

Exploring the wonders of nested object destructuring in ES6

How have you been? I want to remove the property "isCorrect" from a nested object.

Original List

    id: 1,
    questionText: 'This is a test question for tests',
    answerOptions: [
      {
        answerText: 'A',
        isCorrect: true
      },
      {
        answerText: 'B',
        isCorrect: false
      }
    ],
    difficulty: 1
  },
  {
    id: 2,
    questionText: 'This is another test question for tests',
    answerOptions: [
      {
        answerText: 'A',
        isCorrect: false
      },
      {
        answerText: 'B',
        isCorrect: true
      }
    ],
    difficulty: 2
  }

Expected result

    id: 1,
    questionText: 'This is a test question for tests',
    answerOptions: [
      {
        answerText: 'A'
      },
      {
        answerText: 'B'
      }
    ],
    difficulty: 1
  },
  {
    id: 2,
    questionText: 'This is another test question for tests',
    answerOptions: [
      {
        answerText: 'A'
      },
      {
        answerText: 'B'
      }
    ],
    difficulty: 2
  }

I was able to achieve this using the delete code below but I believe there could be a better approach

const cleanResponses = (questions: Question[]): Question[] => {
  questions.forEach(question => {
    question.answerOptions.forEach((answer) => {
      delete answer.isCorrect
    });
  })

  return questions;
}

I tried the line below but it didn't work as expected :(

const { answerOptions: [{ isCorrect }], ...rest } = question

Thank you

javascript json typescript

Answer 1

Answer №1

When utilizing Array#map:

const arr = [
  { id: 1,
    questionText: 'This is a sample question for demonstration purposes',
    answerOptions: [ { answerText: 'A', isCorrect: true }, { answerText: 'B', isCorrect: false } ],
    difficulty: 1
  },
  {
    id: 2,
    questionText: 'This is another sample question for demonstration purposes',
    answerOptions: [ { answerText: 'A', isCorrect: false }, { answerText: 'B', isCorrect: true } ],
    difficulty: 2
  }
];

const res = arr.map(({ answerOptions = [], ...elem }) => ({
  ...elem, 
  answerOptions: answerOptions.map(({ isCorrect, ...answer }) => answer)
}));

console.log(res);

Answer 2

When utilizing Array#map:

const arr = [
  { id: 1,
    questionText: 'This is a sample question for demonstration purposes',
    answerOptions: [ { answerText: 'A', isCorrect: true }, { answerText: 'B', isCorrect: false } ],
    difficulty: 1
  },
  {
    id: 2,
    questionText: 'This is another sample question for demonstration purposes',
    answerOptions: [ { answerText: 'A', isCorrect: false }, { answerText: 'B', isCorrect: true } ],
    difficulty: 2
  }
];

const res = arr.map(({ answerOptions = [], ...elem }) => ({
  ...elem, 
  answerOptions: answerOptions.map(({ isCorrect, ...answer }) => answer)
}));

console.log(res);

Answer 3

Answer №2

Whether you intend to mutate the current array or create a new one will determine the approach you take. Your code works well if you aim to modify the existing array (see the updated version below). However, if you prefer creating a new array, Majed Badawi has provided a solution using the map function. In any case, you will need to iterate over both the objects in the data array and the objects in the answerOptions array to achieve the desired outcome.

const array = [{id:1,questionText:"This is a test question for tests",answerOptions:[{answerText:"A",isCorrect:!0},{answerText:"B",isCorrect:!1}],difficulty:1},{id:2,questionText:"This is another test question for tests",answerOptions:[{answerText:"A",isCorrect:!1},{answerText:"B",isCorrect:!0}],difficulty:2}];

for (let { answerOptions } of array) {
  for (let obj of answerOptions) {
    delete obj.isCorrect;
  }
}

console.log(array);

Answer 4

Whether you intend to mutate the current array or create a new one will determine the approach you take. Your code works well if you aim to modify the existing array (see the updated version below). However, if you prefer creating a new array, Majed Badawi has provided a solution using the map function. In any case, you will need to iterate over both the objects in the data array and the objects in the answerOptions array to achieve the desired outcome.

const array = [{id:1,questionText:"This is a test question for tests",answerOptions:[{answerText:"A",isCorrect:!0},{answerText:"B",isCorrect:!1}],difficulty:1},{id:2,questionText:"This is another test question for tests",answerOptions:[{answerText:"A",isCorrect:!1},{answerText:"B",isCorrect:!0}],difficulty:2}];

for (let { answerOptions } of array) {
  for (let obj of answerOptions) {
    delete obj.isCorrect;
  }
}

console.log(array);

Answer 5

Answer №3

Exploring a more detailed approach to achieve the desired result, we start by iterating over all objects in the array test from the outermost layer. The rest operator is used to distinguish the array of answerOptions objects from the other properties of the question. Moving forward, we proceed to iterate over the answerOptions array, utilizing the rest operator to construct a new answerOption object that excludes the isCorrect property. Finally, all components are merged back together. The function returns an object containing the separated question properties along with the updated answerOptions objects devoid of isCorrect.

  const test = [
    {
      id: 1,
      questionText: "This is a test question for tests",
      answerOptions: [
        {
          answerText: "A",
          isCorrect: true
        },
        {
          answerText: "B",
          isCorrect: false
        }
      ],
      difficulty: 1
    },
    {
      id: 2,
      questionText: "This is another test question for tests",
      answerOptions: [
        {
          answerText: "A",
          isCorrect: false
        },
        {
          answerText: "B",
          isCorrect: true
        }
      ],
      difficulty: 2
    }
  ];

  const cleanResponses = (questions) => {
    return questions.map(({ answerOptions, ...rest }) => {
      const newAnswerOptions = answerOptions.map((answerOption) => {
        const { isCorrect, ...newAnswerOption } = answerOption;
        return newAnswerOption;
      });
      return { answerOptions: { ...newAnswerOptions }, ...rest };
    });
  };
  
  console.log(cleanResponses(test))

Answer 6

Exploring a more detailed approach to achieve the desired result, we start by iterating over all objects in the array test from the outermost layer. The rest operator is used to distinguish the array of answerOptions objects from the other properties of the question. Moving forward, we proceed to iterate over the answerOptions array, utilizing the rest operator to construct a new answerOption object that excludes the isCorrect property. Finally, all components are merged back together. The function returns an object containing the separated question properties along with the updated answerOptions objects devoid of isCorrect.

  const test = [
    {
      id: 1,
      questionText: "This is a test question for tests",
      answerOptions: [
        {
          answerText: "A",
          isCorrect: true
        },
        {
          answerText: "B",
          isCorrect: false
        }
      ],
      difficulty: 1
    },
    {
      id: 2,
      questionText: "This is another test question for tests",
      answerOptions: [
        {
          answerText: "A",
          isCorrect: false
        },
        {
          answerText: "B",
          isCorrect: true
        }
      ],
      difficulty: 2
    }
  ];

  const cleanResponses = (questions) => {
    return questions.map(({ answerOptions, ...rest }) => {
      const newAnswerOptions = answerOptions.map((answerOption) => {
        const { isCorrect, ...newAnswerOption } = answerOption;
        return newAnswerOption;
      });
      return { answerOptions: { ...newAnswerOptions }, ...rest };
    });
  };
  
  console.log(cleanResponses(test))

Exploring the wonders of nested object destructuring in ES6

Answer №1

Answer №2

Answer №3

Similar questions

Master the art of horizontal scrolling in React-Chartsjs-2

What kinds of data types does MongoDB support in JavaScript?

Issue with alert not being triggered in browser when using HTML and JavaScript function

Pause and anticipate the subscription within the corresponding function

Attempting to control an array of objects

Acquiring a snippet of JSON data from a Python response

Using Angular 4 to transfer data from a dynamic modal to a component

Jquery problem with creating a cascading dropdown list

What sets apart Selenium's mouseMove() function from the physical movement of a mouse?

Guide to attempting an asynchronous function again in JavaScript with a time delay

Display various messages when submitting a form based on Ajax technology

What is the method for adding 24 hours to a 12-hour timestamp while preserving the AM and PM designation?

Retrieve the final ID of a dynamic div

Try logging in again if an error occurs

What is the best way to retrieve values within a nested JSON array using PHP?

I could use some assistance with deciphering JSON data

Is there a way to extract the MIME type from a base64 string?

Is there a way to change the format of the date "Wed Jan 01 2020 00:00:00 GMT+0530 (India Standard Time)" to JAN 01, 2020 in JavaScript?

What is the method for triggering two actions within a single linked tag?

Is there a substitute for the Javascript onchange event listener in CakePHP 3?