javascript: loop through object array and pushing elements into one array

Question

I am trying to loop through an object array (data.list) and pull out an element (required_fields.display_value) and push them into another array and concatenate.

I've written the following:

c.data.required_fields = [];
            for(var i=0; i<c.data.list.length; i++) {
                c.data.required_fields.push(
                    c.data.list[i].required_fields.display_value.split(',')             
                );
            }

which returns this:

What do I have to add to my code above so that required_fields is a single array? Thanks!

Possible duplicate of [how can I concatenate two arrays in javascript?](https://stackoverflow.com/questions/36989741/how-can-i-concatenate-two-arrays-in-javascript) — juvian, May 14 '18 at 20:51
Can you please add the rest of the code needed to reproduce the problem? Like some dummy data in `c.data.list`? — Johan Karlsson, May 14 '18 at 20:52
`c.data.require_fields = c.data.list.reduce((acc, dat) => acc.concat(dat.require_fields.display_value), []);` — DiamondDrake, May 14 '18 at 21:03

score 2 · Accepted Answer · edited May 14 '18 at 21:10

c.data.required_fields = [];
for(var i=0; i<c.data.list.length; i++) {
    c.data.required_fields = c.data.required_fields.concat(
        c.data.list[i].required_fields.display_value.split(',')             
    );
}

This should do the trick. Since every call to .split will return an array, you need to concat the contents of that array into the required_fields array. Concat returns a branch new array, however, hence the "c.data.required_fields = c.data.required_fields.concat..." assignment.

**This is a very simple fix. You could of course do something more readable with reduce, but I believe another answer has that covered.

score 1 · Answer 2 · answered May 14 '18 at 21:02

The problem is that you are pushing all of the values for each list[i] in one single operation. This means that you are adding all the elements of each list into a single array slot, which creates an array of arrays.

One thing you can do is to flatten the array after you are done by

c.data.require_field.flatten();

Another option is to individually insert each entry within the list rather than pushing them all in at once:

for(var i=0; i<c.data.list.length; i++) {
   var list = c.data.list[i];

   //for each element in this list, add it to a new spot in the required_fields array
   for(var j=0; j<list.length){
      c.data.required_fields.push(
          c.data.list[j].required_fields.display_value.split(',')             
      );
   }                
}

The first is probably much simpler and succinct, but the second example is added here for clarity on what exactly is going wrong

score 0 · Answer 3 · answered May 14 '18 at 20:59

0

If you would like to flatten your array there is a code snippet on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/flatten

var arr1 = [1, 2, [3, 4]];
arr1.flatten();

//to flatten single level array
arr1.reduce((acc, val) => acc.concat(val), []);
// [1, 2, 3, 4]

answered May 14 '18 at 20:59

Johan Karlsson

494
5
7

This has terrible performance problems, I don't know why. An array of 10000 arrays of 2 numbers takes 300ms. – dcromley May 15 '18 at 03:07

score 0 · Answer 4 · answered May 14 '18 at 21:03

Seems like your value is split into a new array that you do not iterate over to create a 1 dimensional array. I have two suggestions. Either iterate over the split array inside the loop, or concatenate all the comma separated strings first, them do the split.

var dataArray = [];
var list = c.data.list;

list.forEAch(function(listItem){
  var values = listItem.required_fields.display_value.split(',');
  values.forEach(function(value){
    dataArray.push(value);
  });
}

c.data.required_fields = dataArray;

Or perhaps:

var values = "";
var list = c.data.list;

list.forEAch(function(listItem){
  if( !!values ) {
    values += ",";
  }
  values += listItem.required_fields.display_value;
}

c.data.required_fields = values.split(',');

score -1 · Answer 5 · answered May 14 '18 at 20:53

To get your code working, you could simply change it to

c.data.required_fields = [];
        for(var i=0; i<c.data.list.length; i++) {
            Array.prototype.push.apply(c.data.required_fields,
                c.data.list[i].required_fields.display_value.split(',')             
            );
        }

Like that, you call Array's push method on c.data.required_fields and use the contents of c.data.list[i].required_fields.display_value.split(',') as individual arguments rather than an array that'll be pushed into another array.

Muhammad Usman · Answer 6 · 2018-05-14T21:04:58.657

-1

You can simply merge array like.

Join array entries with ,. This will give you a single string with , as delimiter and then you can split them with , to get array

var r = [["Name","a","b"], ["Age","x","y"], ["hope","g","h"]];

console.log(r.join(",").split(','))

edited May 14 '18 at 21:04

answered May 14 '18 at 20:58

Muhammad Usman

10,039
22
39

Looks like the data in required_fields has the format [["Name", "a", "b"], ["Age", "x", "y"], ["hope", "g", "h"]]; – Johan Karlsson May 14 '18 at 21:03
That was a typo. Is that's the reason it's downvoted ? or give me another reason – Muhammad Usman May 14 '18 at 21:05

javascript: loop through object array and pushing elements into one array

6 Answers6