Concatenate Nested Array after Mapping

Question

I have an array with several category objects, each of which has an items property containing an array of item objects. I want to map each item in each category to an object[] with objects that have the properties value and label. For some reason, I can't perform the concatenation.

var categories = [{
                name: "category1",
                items: [{
                    itemId: 1,
                    name: "Item1"
                }, {
                    itemId: 2,
                    name: "Item2"
                }]
            }, {
                name: "category2",
                items: [{
                    itemId: 3,
                    name: "Item3"
                }, {
                    itemId: 4,
                    name: "Item4"
                }]
            }];

var items = [];
for(var i = 0; i < categories.length; i++){
    items.concat($.map(categories[i].items,function(elem){
        return {value:elem.itemId, label:elem.name};
    }));
} 
console.log(items); //prints []

Expected Result

[{
   label: "Item1",
   value: "1"
},
{
   label: "Item2",
   value: "2"
},{
   label: "Item3",
   value: "3"
},{
   label: "Item4",
   value: "4"
}

I feel as if I am missing something very basic. I logged the result of the $.map function and it appears to be returning an []. Can anyone figure out the issue?

JSFiddle: http://jsfiddle.net/vymJv/

Please disregard. I needed to assign items the result of the concat() — Kevin Bowersox
– Kevin Bowersox, Commented Jun 12, 2013 at 15:26

y2knoproblem · Accepted Answer · 2015-07-29 18:09:45Z

29

Another method using straight Javascript:

var x = categories.map(function(val) {
  return val.items;
}).reduce(function(pre, cur) {
   return pre.concat(cur);
}).map(function(e,i) {
  return {label:e.name,value:e.itemId};
});

Output: x = [{label: "Item1", value: 1}, {label: "Item2", value: 2}, …]

answered Jul 29, 2015 at 18:09

y2knoproblem

5686 silver badges9 bronze badges

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

1 Comment

K. Waite Over a year ago

Shorter, ES6+ version of this: var x = categories.map(val => val.items).reduce((pre, cur) => pre.concat(cur)).map(e => ({label: e.name, value: e.itemId}));

Dan · Accepted Answer · 2024-06-03 10:10:36Z

17

Updated with flatMap (not compatible with IE):

categories.flatMap((categories) => categories.items)

flatMap() method returns a new array formed by applying a given callback function to each element of the array, and then flattening the result by one level.

edited Jun 3, 2024 at 10:10

Dan

1551 gold badge2 silver badges9 bronze badges

answered Jan 22, 2021 at 18:03

ncesar

1,8022 gold badges21 silver badges42 bronze badges

1 Comment

Robert Over a year ago

this did the trick, not sure why this answer is not the top one

julienc · Accepted Answer · 2018-10-08 10:58:23Z

10

The concat() method is used to join two or more arrays.

This method does not change the existing arrays, but returns a new array, containing the values of the joined arrays.

http://jsfiddle.net/vymJv/1/

for(var i = 0; i < categories.length; i++){
    items = items.concat($.map(categories[i].items, function(elem) {
        return {value: elem.itemId, label: elem.name};
    }));
}

edited Oct 8, 2018 at 10:58

julienc

20.4k19 gold badges87 silver badges86 bronze badges

answered Jun 12, 2013 at 15:25

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

1 Comment

Kevin Bowersox Over a year ago

Thanks for the answer, I realized this shortly after I posted. I guess I needed to lay it out. I will accept in a few.

luxcoder · Accepted Answer · 2016-11-19 12:43:46Z

4

This piece of code solves your task using a functional programming approach:

var items = [].concat.apply([], categories.map(cat =>
  cat.items.map(elem => ({ value:elem.itemId, label:elem.name })))
)

Explanation: Function.prototype.apply() has the syntax fun.apply(thisArg, [argsArray]) and lets us provide parameters to a function in an array. Array.prototype.concat() combines an arbitrary amount of parameters into one array. If we now write Array.prototype.concat.apply([], [category1Items, ..., categoryNItems]), it actually equals [].concat(category1Items, ..., categoryNItems), which concatenates all parameters together. You can also replace Array.prototype.concat by [].concat to keep it shorter. Otherwise we just use standard mapping to get the job done.

You could also split the code apart a bit more for clarity:

function getItem(elem){
  return {value:elem.itemId, label:elem.name};
}

function getCategoryItems(cat) {
  return cat.items.map(getItem);
}

function flatten(arr) {
  return Array.prototype.concat.apply([], arr);
}

var items = flatten(categories.map(getCategoryItems));

answered Nov 19, 2016 at 12:43

luxcoder

412 bronze badges

1 Comment

Silly Freak Over a year ago

Not sure when the syntax was defined, but nowadays [].concat(...arr) should achieve the same as your flatten definition

Dailenis González Frómeta · Accepted Answer · 2020-03-12 18:13:23Z

4

  const items = categories
          .map(category => category.items)
          .reduce((prev, current) => [...prev, ...current])
          .map((e, i) => ({ label: e.name, value: e.itemId }));

answered Mar 12, 2020 at 18:13

Dailenis González Frómeta

3013 silver badges5 bronze badges

1 Comment

Jason Aller Over a year ago

Code only answers can almost always be improved by the addition of some explanation of how and why.

itsbriany · Accepted Answer · 2016-03-26 22:38:13Z

We could extend the array prototype by creating concatAll which will concatenate all of your arrays by iterating over each subarray, dumping each value into a new array.

Array.prototype.concatAll = function() {
  var results = [];
  this.forEach(function(subArray) {
    subArray.forEach(function(subArrayValue) {
      results.push(subArrayValue);
    });
  });
  return results;
};

Then, we can get the desired result with the following:

let items = categories.map(function(category) {
  return category.items.map(function(item) {
    return {label: item.name, value: item.itemId};
  });
}).concatAll();

We get the items by translating each category into an array of items. Because we have two categories, we will end up with two arrays of items. By applying concatAll on the final result, we flatten those two arrays of items and get the desired output.

Collectives™ on Stack Overflow

Concatenate Nested Array after Mapping

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

1 Comment

1 Comment

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related