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

Answer 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),
  }),
};

Answer 2

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);