Back

Technologies:

javascriptjavascript
avatar
Tolerim
21 days ago

How can I divide an array nested within an object into distinct objects?

My task is to group a JSON array in a specific format. The array looks like this:

const arr = [
  {
      "id": 1,
      "category_name": 
      [
         "category_2",
         "category_3"
      ],
   },
   {
      "id": 2,
      "category_name": 
      [
         "category_6",
         "category_3"
      ],
   },
]
My goal is to create a new array like this:

[
   { categoryname: "category2", id: "1" },
   { categoryname: "category3", id: "1" },

   { categoryname: "category6", id: "2" },
   { categoryname: "category3", id: "2" },
]
Although my initial attempt using the map function did not provide the desired result:

let array = [];

arr.map((item) => array = [ ...array, {categoryname: item.categoryname, id : item.id} ] )

result: 
[
  { categoryname: [ 'category2', 'category_3' ], id: 1 },
  { categoryname: [ 'category6', 'category_3' ], id: 2 }
]
I need to use a different approach. Can someone suggest the necessary steps and functions required to accomplish this?

Answers(2)
avatar
Vogi
20 days ago
Verified Answer
You can use the reduce() method to group the array in the desired format. Here's how you can do it: 
const arr = [
  {
      "id": 1,
      "category_name": 
      [
         "category_2",
         "category_3"
      ],
   },
   {
      "id": 2,
      "category_name": 
      [
         "category_6",
         "category_3"
      ],
   },
];

const result = arr.reduce((acc, curr) => {
  curr.category_name.forEach((category) => {
    acc.push({ category_name: category, id: curr.id.toString() });
  });
  return acc;
}, []);

console.log(result);
This will output: 
[
   { category_name: "category_2", id: "1" },
   { category_name: "category_3", id: "1" },

   { category_name: "category_6", id: "2" },
   { category_name: "category_3", id: "2" },
]
Here's how it works: - We use the reduce() method to iterate over each object in the array. - For each object, we iterate over its category_name array using the forEach() method. - For each category name, we push an object with the category_name and id properties into the accumulator array. - Finally, we return the accumulator array. I hope this helps! Let me know if you have any further questions.

Sources

A Beginner's Guide to JSON with Examples - Atta-Ur-Rehman ShahGeneration of JSON Data With SQL/JSON Functions - Oracle Help CenterHow to group JSON data in JavaScript? - TutorialsPointgrouping json data in a specific format - Stack Overflowjavascript - Grouping JSON by values - Stack OverflowJSON Arrays - W3School
avatar
Tolerim
21 days ago
To achieve the desired result, you need to use a combination of Array.map() and Array.reduce() methods. Here is an example code snippet that should work for you: 
const arr = [
  {
      "id": 1,
      "category_name": 
      [
         "category_2",
         "category_3"
      ],
   },
   {
      "id": 2,
      "category_name": 
      [
         "category_6",
         "category_3"
      ],
   },
];

const result = arr.reduce((acc, item) => {
  item.category_name.forEach((cat) => {
    acc.push({id: item.id, category_name: cat});
  });
  return acc;
}, []);

console.log(result);
In this example, we are using the Array.reduce() method to iterate over the arr array and accumulate the result in a new array called acc. For each item in arr, we are iterating over item.category_name using Array.forEach() and creating a new object with id and each category_name. We are then pushing this object into the acc array. Finally, we are returning acc as the result. This should give you the desired output as follows: 
{ category_name: "category_2", id: 1 },
   { category_name: "category_3", id: 1 },
   { category_name: "category_6", id: 2 },
   { category_name: "category_3", id: 2 }
]
;