CODEWITHSUNDEEP
javascriptarraysreactjs
brabus
brabus

Reputation: 25

Change object structure Javascript

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

Upvotes: 1

Views: 268

Answers (2)

Drew Reese
Drew Reese

Reputation: 203099

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

Upvotes: 0

T.D. Stoneheart
T.D. Stoneheart

Reputation: 901

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

Upvotes: 1

Related Questions