add the array element to the object

Question

add the array element to the object

How can I extract values from a nested array and push them into a new single object?

const Ll = [
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Alfred',
          job: 'manager'
        },
        {
          name: 'Mark',
          job: 'manager'
        }
      ]
    ]
  },
  {
    _id: 'grocery',
    category: [
      [
        {
          name: 'William',
          job: 'manager'
        }
      ]
    ]
  }
]

I would like the resulting object to look like this:

const obj = {
  milk: [
    {
      name: 'Alfred',
      job: 'manager'
    },
    {
      name: 'Mark',
      job: 'manager'
    }
  ],
  grocery: [
    {
      name: 'William',
      job: 'manager'
    }
  ]
}

Is there a way to achieve this? Thank you!

javascript arrays object

Answer 1

Answer №1

If you want to achieve this, consider using the Array.prototype.reduce() method in JavaScript. Iterate through the array and group its elements based on the _id property.

const data = [
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Alfred',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'grocery',
    category: [
      [
        {
          name: 'William',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Mark',
          job: 'manager',
        },
      ],
    ],
  },
];
const result = data.reduce((previous, current) => {
  const prev = previous;
  const key = current._id;
  prev[key] = prev[key] ?? [];
  prev[key].push(...current.category.flat());
  return prev;
}, {});
console.log(result);

Using ES6:

const data = [
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Alfred',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'grocery',
    category: [
      [
        {
          name: 'William',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Mark',
          job: 'manager',
        },
      ],
    ],
  },
];
const result = data.reduce((previous, current) => {
  const prev = previous;
  const key = current._id;
  prev[key] = prev[key] || [];
  prev[key].push(...current.category.reduce((accumulator, value) => accumulator.concat(value), []));
  return prev;
}, {});
console.log(result);

Answer 2

If you want to achieve this, consider using the Array.prototype.reduce() method in JavaScript. Iterate through the array and group its elements based on the _id property.

const data = [
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Alfred',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'grocery',
    category: [
      [
        {
          name: 'William',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Mark',
          job: 'manager',
        },
      ],
    ],
  },
];
const result = data.reduce((previous, current) => {
  const prev = previous;
  const key = current._id;
  prev[key] = prev[key] ?? [];
  prev[key].push(...current.category.flat());
  return prev;
}, {});
console.log(result);

Using ES6:

const data = [
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Alfred',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'grocery',
    category: [
      [
        {
          name: 'William',
          job: 'manager',
        },
      ],
    ],
  },
  {
    _id: 'milk',
    category: [
      [
        {
          name: 'Mark',
          job: 'manager',
        },
      ],
    ],
  },
];
const result = data.reduce((previous, current) => {
  const prev = previous;
  const key = current._id;
  prev[key] = prev[key] || [];
  prev[key].push(...current.category.reduce((accumulator, value) => accumulator.concat(value), []));
  return prev;
}, {});
console.log(result);

Answer 3

Answer №2

Check out this solution:

let newData = {};
data.forEach(item => {
    const itemList = item.category.reduce((acc, value) => acc.concat(value), []);
    newData[item._id] = newData[item._id] ? [...newData[item._id], ...itemList] : [...itemList];
});

console.log(newData);

Answer 4

Check out this solution:

let newData = {};
data.forEach(item => {
    const itemList = item.category.reduce((acc, value) => acc.concat(value), []);
    newData[item._id] = newData[item._id] ? [...newData[item._id], ...itemList] : [...itemList];
});

console.log(newData);

Answer 5

Answer №3

To achieve this, consider utilizing the reduce method along with an empty object as the starting point.

This approach involves:

computed property, such as [_id]: category
object destructuring, like (acc, { _id, category }) in combination with ({...acc})

const data = [ { _id: "milk", category: [ [ { name: "Alfred", job: "manager", }, { name: "Mark", job: "manager", }, ], ], }, { _id: "grocery", category: [ [ { name: "William", job: "manager", }, ], ], }, ];

const res = data.reduce(
  (acc, { _id, category }) => ({ ...acc, [_id]: category.flat() }),
  {}
);

console.log(res);

Answer 6

To achieve this, consider utilizing the reduce method along with an empty object as the starting point.

This approach involves:

computed property, such as [_id]: category
object destructuring, like (acc, { _id, category }) in combination with ({...acc})

const data = [ { _id: "milk", category: [ [ { name: "Alfred", job: "manager", }, { name: "Mark", job: "manager", }, ], ], }, { _id: "grocery", category: [ [ { name: "William", job: "manager", }, ], ], }, ];

const res = data.reduce(
  (acc, { _id, category }) => ({ ...acc, [_id]: category.flat() }),
  {}
);

console.log(res);

Answer 7

Answer №4

let uniqueKeys = [...new Set(data.map(item => item._id))];

let updatedData = uniqueKeys.reduce((acc, curr) => {
  const value = data.filter(({ _id }) => _id === curr).map(({ category }) => {
    return {
      ...category[0][0]
    }
  });

  return {
    ...acc,
    [curr]: value
  }
}, {});

Answer 8

let uniqueKeys = [...new Set(data.map(item => item._id))];

let updatedData = uniqueKeys.reduce((acc, curr) => {
  const value = data.filter(({ _id }) => _id === curr).map(({ category }) => {
    return {
      ...category[0][0]
    }
  });

  return {
    ...acc,
    [curr]: value
  }
}, {});

add the array element to the object

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular is not refreshing the DOM, but it is instead logging the data to the console

A step-by-step guide for invoking a JSON-based API

Combining various API requests within a Vue component, which includes a for loop

Elevate your frontend development game with the powerful combination of Vue js 3

Sharing Angular 4 components in my project - collaboration at its finest

Express - Unhandled promise rejection detected

When the enter key is pressed, the form will be automatically submitted

The Error Message: "404 Not Found - Your Form Submission Could Not

Is it necessary to make a distinct route for SocketIO implementation?

Error: The function "split" is not a valid function in React hook form and has caused

After making changes to the variables in my forEach loop, they revert back to their initial values

The error message encountered with React Easy DatePicker is: "Uncaught ReferenceError: process is not defined."

Is there a method to compare a specific value at an index with all subsequent values until a match is found?

How to align borders of adjacent 2D arrays and Blur them (Heightmaps)

Identify and remove numbers from an array that have the same digit, without having prior knowledge of which digit it

JavaScript code for client-side implementation using Node.js

What is the best way to manage a JSON feed that does not provide any results?

Activating CORS for .ajax POST requests

Ways to shift duplicates to the beginning of an Object array?

Instructions on how to export an HTML table to Excel or PDF by including specific buttons using PHP or JavaScript