Change object structure Javascript

Question

I have an array and I want to override the object attributes

This the main data

const Data = {
    "id": "1",
    "name": "USA",
    "questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
    "children": [
        { "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
        { "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
    ]
}

I want to change in every question instead of name I want to put questionName like this

{ id: 1, questionName: "1 qst" }

I was able to change it in first object question through this code

let dataFiltred = Data[0]?.questions?.map((item) => {
            return {
                questionName: item.name,
                id: item.id,
                
            }
        })

But I am struggling to change it in children question

Have you tried Data.questions = Data.questions.map(item => { id: item.id, questionName: item.name })? — secan
– secan, Commented Aug 25, 2021 at 15:07

T.D. Stoneheart · Accepted Answer · 2021-08-25 15:13:44Z

1

function mapQuestionObject({ name, id }) {
  return { id, questionName: name };
}

const mapped = {
  ...Data,
  questions: Data.questions.map(mapQuestionObject),
  children: Data.children.map(child => ({
    ...child,
    questions: child.questions.map(mapQuestionObject),
  }),
};

answered Aug 25, 2021 at 15:13

T.D. Stoneheart

9365 silver badges7 bronze badges

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

Comments

Drew Reese · Accepted Answer · 2021-08-25 15:14:11Z

Map each questions array to a new array and change the name property in the mapped value.

const data = {
    "id": "1",
    "name": "USA",
    "questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
    "children": [
        { "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
        { "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
    ]
};

const newData = {
  ...data,
  questions: data.questions.map(({ name: questionName, ...rest }) => ({
    ...rest,
    questionName,
  })),
  children: data.children.map(child => ({
    ...child,
    questions: child.questions.map(({ name: questionName, ...rest }) => ({
      ...rest,
      questionName,
    }))
  })),
};

console.log(newData);

Since the questions mapping is the same callback you can factor it out to make your code more DRY

const data = {
    "id": "1",
    "name": "USA",
    "questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }],
    "children": [
        { "id": "1" , "name": "DC" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id:2, name: "3 qst" }]},
        { "id": "2" , "name": "Florida" ,"questions": [{ id: 1, name: "1 qst" }, { id: 2, name: "2 qst" }, { id: 3, name: "3 qst" }]}
    ]
};

const mapQuestions = arr => arr.map(({ name: questionName, ...rest }) => ({
  ...rest,
  questionName,
}));

const newData = {
  ...data,
  questions: mapQuestions(data.questions),
  children: data.children.map(child => ({
    ...child,
    questions: mapQuestions(child.questions),
  })),
};

console.log(newData);

Collectives™ on Stack Overflow

Change object structure Javascript

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related