Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Flatten the array of objects and removing duplicate key entry

I have array of objects data as below where ID is duplicate key in nested array of object:

 const arr =  [
      {
        "First Name": "ABC",
        "Last Name": "XYZ",
        "Gender": "MALE",
        "Id": "123",
        "moreDetails": {
          "items": [
            {
              "Id": "123",
              "City": "BLR",
              "State": "KA"
            }
          ]
        }
      },
      {
        "First Name": "Test",
        "Last Name": "Me",
        "Gender": "FEMALE",
        "Id": "12345",
        "moreDetails": {
          "items": [
            {
              "Id": "12345",
              "City": "KAN",
              "State": "UP"
            }
          ]
        }
      }
    ]

Expecting below format data where ID is now with one entry and nested array is also flattened:

[
  {
    "First Name": "ABC",
    "Last Name": "XYZ",
    "Gender": "MALE",
    "Id": "123",
    "City": "BLR",
    "State": "KA"
  },
  {
    "First Name": "Test",
    "Last Name": "Me",
    "Gender": "FEMALE",
    "Id": "12345",
    "City": "KAN",
    "State": "UP"
  }
]

I tried using Array.flat() and Array.flat(Infinity) but then do not work on this data set.
I have also tried with simple for loop but not getting expected result. Can anyone please help with missing logic here.

const result2 = [];
for (let key in arr) {
if (arr.hasOwnProperty(key)) {
  if(!typeof arr[key].moreDetails === 'object'){
    result2.push(arr[key]);
  }else{
    for(let key2 in arr[key].moreDetails.items){
      result2.push(arr[key2]);
    }
  }
}
}
Tags:

3

Answers


  1. 0

    You can use map() to iterate over the array and extract the nested properties, then flatten the structure. Here’s how you can transform the array to the desired format:

    const arr = [
  {
    "First Name": "ABC",
    "Last Name": "XYZ",
    "Gender": "MALE",
    "Id": "123",
    "moreDetails": {
      "items": [
        {
          "Id": "123",
          "City": "BLR",
          "State": "KA"
        }
      ]
    }
  },
  {
    "First Name": "Test",
    "Last Name": "Me",
    "Gender": "FEMALE",
    "Id": "12345",
    "moreDetails": {
      "items": [
        {
          "Id": "12345",
          "City": "KAN",
          "State": "UP"
        }
      ]
    }
  }
];

const result = arr.map(item => {
  const details = item.moreDetails.items[0]; // Assuming there is always one item in the `items` array
  return {
    "First Name": item["First Name"],
    "Last Name": item["Last Name"],
    "Gender": item.Gender,
    "Id": item.Id,
    "City": details.City,
    "State": details.State
  };
});

console.log(result);
    Login or Signup to reply.
  2. 0

    You can use Array#map with Array#reduce to merge such an object like so

    const arr = [{
    "First Name": "ABC",
    "Last Name": "XYZ",
    "Gender": "MALE",
    "Id": "123",
    "moreDetails": {
      "items": [{
        "Id": "123",
        "City": "BLR",
        "State": "KA"
      }]
    }
  },
  {
    "First Name": "Test",
    "Last Name": "Me",
    "Gender": "FEMALE",
    "Id": "12345",
    "moreDetails": {
      "items": [{
        "Id": "12345",
        "City": "KAN",
        "State": "UP"
      }]
    }
  }
];

const flattened = arr.map(({ moreDetails, ...rest }) => ({
  ...rest,
  ...moreDetails?.items.reduce(Object.assign)
}));

console.log(flattened);
    Login or Signup to reply.
  3. 0 
    const arr = [
  {
    "First Name": "ABC",
    "Last Name": "XYZ",
    "Gender": "MALE",
    "Id": "123",
    "moreDetails": {
      "items": [
        {
          "Id": "123",
          "City": "BLR",
          "State": "KA"
        }
      ]
    }
  },
  {
    "First Name": "Test",
    "Last Name": "Me",
    "Gender": "FEMALE",
    "Id": "12345",
    "moreDetails": {
      "items": [
        {
          "Id": "12345",
          "City": "KAN",
          "State": "UP"
        }
      ]
    }
  }
];

const result = arr.map(item => {
  const details = item.moreDetails.items[0] || { City: null, State: null }; // Fallback if items array is empty
  return {
    "First Name": item["First Name"],
    "Last Name": item["Last Name"],
    "Gender": item.Gender,
    "Id": item.Id,
    "City": details.City,
    "State": details.State
  };
});

console.log(result);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search