Question 73160 in Reactjs Question posted in
The new location for the React Documentation can be found here.

how to mapping through nested multi dimensional array and convert into new response – Reactjs

Hello friends let say i have nested data below

const payload = [
    {
      title: "ADDITIONAL",
      data: [
        {
          documentCategory: "ADDITIONAL",
          documentCode: "CUSTOMER_CLAIM_FORM",
          documentKey:
            "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_CUSTOMER_CLAIM_FORM_ca2b0204-b8c4-42f7-b059-580818789a64.jpg"
        },
        {
          documentCategory: "ADDITIONAL",
          documentCode: "POWER_OF_ATTORNEY",
          documentKey:
            "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POWER_OF_ATTORNEY_6de88371-c666-4ce5-87f2-8aedf778f4c4.jpg"
        },
        {
          documentCategory: "ADDITIONAL",
          documentCode: "POLICE_RECORD",
          documentKey:
            "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POLICE_RECORD_15d989de-9cfb-4574-8451-92f445177331.jpg"
        }
      ],
      chevronFlag: true
    },
...
]

ive try several ways like below

  for (let i = 0; i < payload.length; i++) {
    const element = payload[i].data.map((item) => {
      return item;
    });
    console.log(element);
  }

and i got this result for each new obj for each properties in array

enter image description here

my goals is

const newObj = {
documentCode: "CUSTOMER_CLAIM_FORM"
documentKey: "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_CUSTOMER_CLAIM_FORM_ca2b0204-b8c4-42f7-b059-580818789a64.jpg",
documentCode: "POWER_OF_ATTORNEY"
documentKey: "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POWER_OF_ATTORNEY_6de88371-c666-4ce5-87f2-8aedf778f4c4.jpg",
...
}

please help me to understand.. thank you so much

Tags:

2

Answers


  1. 0

    You can only have unique keys inside an object. What do you think about using the documentCode values as keys of newObj?

      let newObj = {};
  for ({data} of payload) {
    for (item of data) {
      newObj[item.documentCode] = item.documentKey;
    }
  }
  console.log(newObj);

    response:

    {
  "CUSTOMER_CLAIM_FORM": "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_CUSTOMER_CLAIM_FORM_ca2b0204-b8c4-42f7-b059-580818789a64.jpg",
  "POWER_OF_ATTORNEY": "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POWER_OF_ATTORNEY_6de88371-c666-4ce5-87f2-8aedf778f4c4.jpg",
  "POLICE_RECORD": "customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POLICE_RECORD_15d989de-9cfb-4574-8451-92f445177331.jpg"
}
    Login or Signup to reply.
  2. 0

    If I have understood your problem correctly, all you need to do is to get the answer in this format:

    [
   {
     "CUSTOMER_CLAIM_FORM": "SOMETHING",
     "POWER_OF_ATTORNEY": "SOMETHING",
     "POLICE_RECORD": "SOMETHING"
   },
   ...
]

    The array has been used as your payload is an array, and it will have more objects containing the data array.

    Solution

    let finalResponse = [];
payload.map(payloadItem => {
  let myObject = {}

  payloadItem.data.map(data => {
    myObject[data.documentCode] = data.documentKey;
    
    return null;
  });

  finalResponse.push(myObject);

  return null;
});

// No compulsion of using JSON.stringify here
console.log(JSON.stringify(finalResponse));

    Response

    [
  {
    "CUSTOMER_CLAIM_FORM":"customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_CUSTOMER_CLAIM_FORM_ca2b0204-b8c4-42f7-b059-580818789a64.jpg",
    "POWER_OF_ATTORNEY":"customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POWER_OF_ATTORNEY_6de88371-c666-4ce5-87f2-8aedf778f4c4.jpg",
    "POLICE_RECORD":"customer/9fdf7ca8-4251-41c8-9116-6d006fa64aea/800123000004054/LIFESAVER_DEATH/LIFESAVER_DEATH_POLICE_RECORD_15d989de-9cfb-4574-8451-92f445177331.jpg"
  }
]

    As your response grows, it will keep on adding more data to it, and you will see the change as the data changes.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search