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:
enter image description here

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

• juvian: Possible duplicate of how can I concatenate two arrays in javascript?
• Johan Karlsson: Can you please add the rest of the code needed to reproduce the problem? Like some dummy data in c.data.list?
• DiamondDrake: c.data.require_fields = c.data.list.reduce((acc, dat) => acc.concat(dat.require_fields.display_value), []);

Answer 1

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.

Answer 2

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

Answer 3

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]

• dcromley: This has terrible performance problems, I don't know why. An array of 10000 arrays of 2 numbers takes 300ms.

Answer 4

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(',');

Answer 5

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.

Answer 6

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(','))

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