JS loop through array and group with map

Question

I have array terms:

[
    {
        "label": "programming",
        "id": 6,
        "taxonomy": "category"
    },
    {
        "label": "design",
        "id": 4,
        "taxonomy": "post_tag"
    },
    {
        "label": "css",
        "id": 3,
        "taxonomy": "post_tag"
    },
    {
        "label": "other",
        "id": 8,
        "taxonomy": "category"
    }
]

I am trying to create the following newArray array from array terms:

[
  {
      "taxonomy": "category",
      "ids": [6, 8]
  },
  {
      "taxonomy": "post_tag",
      "ids": [4, 3]
  },
]

I have to take the id from each object in the terms array and add them to the corresponding taxonomy in the array newArray.

I am trying the following:

const taxonomyArray = [];
const newArray = [];

// Loop through original term array and get the taxonomies
terms.forEach( el => {
   taxonomyArray.push( el['taxonomy'] )
});

// Remove duplicate taxonomy values from array taxonomyArray
const uniqueTaxonomyArray = [ ...new Set(taxonomyArray) ];

// Create the new array
uniqueTaxonomyArray.forEach( el => {
    const groupedArray = terms
    .filter( ( { taxonomy } ) => taxonomy === el )
    .map( ( { value, taxonomy } ) => ( {
       taxonomy: el,
       ids: value
    } ) );

    newArray.push( groupedArray );
});

It is giving me:

[
    [
        {
            "taxonomy": "category",
            "ids": 6
        },
        {
            "taxonomy": "category",
            "ids": 8
        }
    ],
    [
        {
            "taxonomy": "post_tag",
            "ids": 4
        },
        {
            "taxonomy": "post_tag",
            "ids": 3
        }
    ]
]

Is there a better way to achieve this?

Use flatMap instead of forEach

evolutionxbox
– evolutionxbox

2021-11-21 13:36:43 +00:00
Commented Nov 21, 2021 at 13:36 — evolutionxbox
– evolutionxbox, Commented Nov 21, 2021 at 13:36

ProDec · Accepted Answer · 2021-11-21 22:36:06Z

3

Array.reduce with Map

const terms = [ { "label": "programming", "id": 6, "taxonomy": "category" }, { "label": "design", "id": 4, "taxonomy": "post_tag" }, { "label": "css", "id": 3, "taxonomy": "post_tag" }, { "label": "other", "id": 8, "taxonomy": "category" }];

const map = terms.reduce((acc, {id, taxonomy}) => {
  if (acc.has(taxonomy)) {
    acc.get(taxonomy).ids.push(id);
  } else {
    acc.set(taxonomy, {taxonomy: taxonomy, ids: [id]});
  }
  return acc;
}, new Map());

const result = [...map.values()];

console.log(result);

reduce

The reducer walks through the array element-by-element, at each step adding the current array value to the result from the previous step (this result is the running sum of all the previous steps) — until there are no more elements to add.

// Arrow function
reduce((previousValue, currentValue) => { ... } )
reduce((previousValue, currentValue, currentIndex) => { ... } )
reduce((previousValue, currentValue, currentIndex, array) => { ... } )
reduce((previousValue, currentValue, currentIndex, array) => { ... }, initialValue)

// Callback function
reduce(callbackFn)
reduce(callbackFn, initialValue)

// Inline callback function
reduce(function(previousValue, currentValue) { ... })
reduce(function(previousValue, currentValue, currentIndex) { ... })
reduce(function(previousValue, currentValue, currentIndex, array) { ... })
reduce(function(previousValue, currentValue, currentIndex, array) { ... }, initialValue)

edited Nov 21, 2021 at 22:36

answered Nov 21, 2021 at 13:39

ProDec

5,4001 gold badge6 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

CyberJ Over a year ago

Thank you! This looks like it is working great. What does acc stand for?

ProDec Over a year ago

@CyberJ it's accumulative result from each reducing step.

Collectives™ on Stack Overflow

JS loop through array and group with map

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related