JavaScript flattening an array of arrays of objects

Question

I have an array which contains several arrays, each containing several objects, similar to this.

[[object1, object2],[object1],[object1,object2,object3]]

Here is a screenhot of the object logged to the console.

What would be the best approach to flattening this out so it just an array of objects?

I've tried this with no luck:

console.log(searchData);  
  var m = [].concat.apply([],searchData);    
console.log(m);

searchData logs out the screenshot above, but m logs out [ ]

Here is the actual contents of searchData:

[[{"_id":"55064111d06b96d974937a6f","title":"Generic Title","shortname":"generic-title","contents":"<p>The Healing Center offers practical, social, and spiritual support to individuals and families. Services include, but are not limited to: food and clothing, job skills training and job search assistance, auto repair (Saturdays only), mentoring, financial counseling, tutoring, prayer, life skills training, and helpful information about local community services.</p><p>Stay in touch with us:</p>","__v":0},{"_id":"5508e1405c621d4aad2d2969","title":"test english","shortname":"test-page","contents":"<h2>English Test</h2>","__v":0}],[{"_id":"550b336f33a326aaee84f883","shortname":"ok-url","title":"now english","contents":"<p>okokko</p>","category":"Transportation","__v":0}]]

for some reason that gives me an empty [ ]. Several other methods I've tried also have...I'm not sure why? — byrdr
– byrdr, Commented Mar 20, 2015 at 3:13
you're doing something else wrong if all the options presented are not working. — dandavis
– dandavis, Commented Mar 20, 2015 at 3:16

Léa Gris · Accepted Answer · 2020-10-21 12:17:16Z

89

You can use Array.concat like bellow:-

var arr = [['object1', 'object2'],['object1'],['object1','object2','object3']];
var flattened = [].concat.apply([],arr);

flattened will be your expected array.

ES 2020 gives the flat, also flatMap if you want to iterate over, to flat lists of lists:

[['object1'], ['object2']].flat() // ['object1', 'object2']

edited Oct 21, 2020 at 12:17

Léa Gris

20.2k4 gold badges39 silver badges52 bronze badges

answered Mar 20, 2015 at 3:13

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

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

7 Comments

byrdr Over a year ago

For some reason this returns an empty array. Any ideas why that might be occuring?

dandavis Over a year ago

i like this better even than my reduce answer.

byrdr Over a year ago

It works on the array provided in the answer. For some reason my array returns [ ] though.

Mritunjay Over a year ago

@byrdr can you post what exactly you are trying?

Nishanth Matha Over a year ago

@Mritunjay can you please add explanation to your code?

|

score 18 · Accepted Answer · 2017-01-20 02:36:03Z

18

A recursive solution for deep (nested) flattening:

function flatten(a) {
  return Array.isArray(a) ? [].concat.apply([], a.map(flatten)) : a;
}

A bit more compactly with ES6:

var flatten = a => Array.isArray(a) ? [].concat(...a.map(flatten)) : a;

For fun, using a generator named F for "flatten", to lazily generate flattened values:

function *F(a) {
  if (Array.isArray(a)) for (var e of a) yield *F(e); else yield a;
}

>> console.log(Array.from(F([1, [2], 3])));
<< [ 1, 2, 3 ]

For those not familiar with generators the yield * syntax yields values from another generator. Array.from takes an iterator (such as results from invoking the generator function) and turns it into an array.

edited Jan 20, 2017 at 2:36

answered Mar 20, 2015 at 3:25

user663031

Comments

Huy Hoang Pham · Accepted Answer · 2015-03-20 03:14:17Z

12

If you only need simple flatten, this may works:

var arr = [['object1', 'object2'],['object1'],['object1','object2','object3']];
var flatenned = arr.reduce(function(a,b){ return a.concat(b) }, []);

For more complex flattening, Lodash has the flatten function, which maybe what you need: https://lodash.com/docs#flatten

//Syntax: _.flatten(array, [isDeep])

_.flatten([1, [2, 3, [4]]]);
// → [1, 2, 3, [4]];

// using `isDeep` to recursive flatten
_.flatten([1, [2, 3, [4]]], true);
// → [1, 2, 3, 4];

answered Mar 20, 2015 at 3:14

Huy Hoang Pham

4,1471 gold badge19 silver badges28 bronze badges

2 Comments

dandavis Over a year ago

good example for showing why to prefer [].reduce vs _.flatten !

user663031 Over a year ago

@dandavis Well, all he needs to do is specify the optional argument to _.flatten to get the deep behavior, or call _.flattenDeep.

Taki · Accepted Answer · 2019-02-04 20:45:23Z

you can use flat() :

const data = [ [{id:1}, {id:2}], [{id:3}] ];
const result = data.flat();
console.log(result);

// you can specify the depth

const data2 = [ [ [ {id:1} ], {id:2}], [{id:3}] ];
const result2 = data2.flat(2);

console.log(result2);

in your case :

const data = [[{"_id":"55064111d06b96d974937a6f","title":"Generic Title","shortname":"generic-title","contents":"<p>The Healing Center offers practical, social, and spiritual support to individuals and families. Services include, but are not limited to: food and clothing, job skills training and job search assistance, auto repair (Saturdays only), mentoring, financial counseling, tutoring, prayer, life skills training, and helpful information about local community services.</p><p>Stay in touch with us:</p>","__v":0},{"_id":"5508e1405c621d4aad2d2969","title":"test english","shortname":"test-page","contents":"<h2>English Test</h2>","__v":0}],[{"_id":"550b336f33a326aaee84f883","shortname":"ok-url","title":"now english","contents":"<p>okokko</p>","category":"Transportation","__v":0}]]

const result = data.flat();

console.log(result);

Shreyas · Accepted Answer · 2018-04-25 11:17:36Z

5

Using ES6 Spread Operator

Array.prototype.concat(...searchData)

OR

[].concat(...searchData)

answered Apr 25, 2018 at 11:17

Shreyas

1,93518 silver badges34 bronze badges

Comments

bhargava.prabu · Accepted Answer · 2022-02-17 16:43:11Z

3

You can use this custom recursive method to flattened any nested array

const arr = [
  [1, 2],
  [3, 4, 5],
  [6, [7, 8], 9],
  [10, 11, 12]
]

const flatenedArray = arr => {
  let result = [];
  if(!arr.constructor === Array) return;
  arr.forEach(a => {
    if(a.constructor === Array) return result.push(...flatenedArray(a));
    result.push(a);
  });
  return result;
}


console.log(flatenedArray(arr)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]

answered Feb 17, 2022 at 16:43

bhargava.prabu

7187 silver badges20 bronze badges

Comments

Miguel · Accepted Answer · 2015-03-20 04:32:28Z

2

Recursively flatten an array:

function flatten(array) {
   return !Array.isArray(array) ? array : [].concat.apply([], array.map(flatten));
}
 
var yourFlattenedArray = flatten([[{"_id":"55064111d06b96d974937a6f","title":"Generic Title","shortname":"generic-title","contents":"<p>The Healing Center offers practical, social, and spiritual support to individuals and families. Services include, but are not limited to: food and clothing, job skills training and job search assistance, auto repair (Saturdays only), mentoring, financial counseling, tutoring, prayer, life skills training, and helpful information about local community services.</p><p>Stay in touch with us:</p>","__v":0},{"_id":"5508e1405c621d4aad2d2969","title":"test english","shortname":"test-page","contents":"<h2>English Test</h2>","__v":0}],[{"_id":"550b336f33a326aaee84f883","shortname":"ok-url","title":"now english","contents":"<p>okokko</p>","category":"Transportation","__v":0}]]
);

log(yourFlattenedArray);

function log(data) {
  document.write('<pre>' + JSON.stringify(data, null, 2) + '</pre><hr>');
}

* {font-size: 12px; }

edited Mar 20, 2015 at 4:32

answered Mar 20, 2015 at 3:18

Miguel

20.7k5 gold badges47 silver badges68 bronze badges

13 Comments

byrdr Over a year ago

That worked! thank you, I'll have to dissect the code. So why is this one working when the others did not?

user663031 Over a year ago

Something vaguely non-DRY about checking for array-ness twice.

Lye Fish Over a year ago

@byrdr: The other answers work fine unless you misrepresented the data.

Lye Fish Over a year ago

@byrdr: You have several solutions that have been verified as working, yet you report the same problem. This should tell you that the problem is elsewhere. Is this data coming from an XHR request? If so, are you not waiting for the response before logging the data?

Lye Fish Over a year ago

@byrdr: It's not worth guessing when you could just provide actual code that you're running and with the logging you're doing.

|

WayHunter · Accepted Answer · 2015-08-01 23:38:26Z

2

let functional = {
    flatten (array) {
        if (Array.isArray(array)) {
            return Array.prototype.concat(...array.map(this.flatten, this));
        }

        return array;
    }
};

functional.flatten([0, [1, 2], [[3, [4]]]]); // 0, 1, 2, 3, 4

answered Aug 1, 2015 at 23:38

WayHunter

1,2454 gold badges14 silver badges19 bronze badges

1 Comment

user4639281 Over a year ago

This answer is ECMAScript 2015 which is not covered by the javascript tag, unless the appropriate tag has been appended to the tag list of this question, a traditional JavaScript answer is expected.

Adnan Khan · Accepted Answer · 2019-01-08 07:57:14Z

2

I've noticed that people are using recursions which are not cost friendly, especially with new ES6 standards giving us the power of spread operators. When you're pushing the items into the master array just use ... and it will automatically add flattened objects. Something like

array.push(...subarray1)    // subarray1 = [object1, object2]
array.push(...subarray2)    // subarray2 = [object3]
array.push(...subarray3)    // subarray3 = [object4,object5, object6]
// output -> array = [object1, object2, object3, object4, object5, object6]

answered Jan 8, 2019 at 7:57

Adnan Khan

3973 silver badges12 bronze badges

Comments

thodwris · Accepted Answer · 2021-07-06 07:55:46Z

My solution to flatten an array of objects and return a single array.

flattenArrayOfObject = (arr) => {
  const flattened = {};

  arr.forEach((obj) => {
    Object.keys(obj).forEach((key) => {
      flattened[key] = obj[key];
    });
  });

  return flattened;
};

Example

const arr = [
  {
    verify: { '0': 'xyzNot verified', '1': 'xyzVerified' },
    role_id: { '1': 'xyzMember', '2': 'xyzAdmin' },
    two_factor_authentication: { '0': 'No', '1': 'Yes' }
  },
  { status: { '0': 'xyzInactive', '1': 'Active', '2': 'xyzSuspend' } }
]

flattenArrayOfObject(arr)

// {
//   verify: { '0': 'xyzNot verified', '1': 'xyzVerified' },
//   status: { '0': 'xyzInactive', '1': 'Active', '2': 'xyzSuspend' },
//   role_id: { '1': 'xyzMember', '2': 'xyzAdmin' },
//   two_factor_authentication: { '0': 'No', '1': 'Yes' }
// }

Mohammad Daneshamooz · Accepted Answer · 2021-06-17 14:44:46Z

If each object has an array and continues in the same way nested :

function flatten(i,arrayField){
  if(Array.isArray(i)) return i.map(c=>flatten(c,arrayField));
  if(i.hasOwnProperty(arrayField)) return [{...i,[arrayField]:null},...i[arrayField].map(c=>flatten(c,arrayField))];
  return {...i,[arrayField]:null};
}

let data=flatten(myData,'childs');

mydata like this :

[
{
    "id": 1,
    "title": "t1",
    "sort_order": 200,
    "childs": [
        {
            "id": 2,
            "title": "t2",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 3,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 4,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 5,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 6,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        }
    ]
},
{
    "id": 7,
    "title": "راهنما",
    "sort_order":"mytitle",
    "childs": [
        {
            "id": 8,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 9,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        },
        {
            "id": 10,
            "title":"mytitle",
            "sort_order": 200,
            "childs": []
        }
    ]
}

]

Jahedul Hoque · Accepted Answer · 2023-12-11 06:56:04Z

1

JavaScript flat is a way to achieve a flattened array from a multidimensional array

For two dimentional array

const data = [
  [{id: 1, name: 'Test Name'}], 
  [{id: 2, name: 'Test Name 2'}]
 ].flat()
console.log(data)

For multidimensional array

const data = [
  [{id: 1, name: 'Test Name'}], 
  [
    {id: 2, name: 'Test Name 2'}, 
    [{id: 3, name: 'Test Name 3'}]
  ]
].flat(Infinity)
console.log(data)

answered Dec 11, 2023 at 6:56

Jahedul Hoque

2852 silver badges6 bronze badges

Comments

Tarun Majumder · Accepted Answer · 2018-10-06 16:14:34Z

0

let nestedArray = [[1, 2], [3, 4], [5, 6]];

let flattenArray = function(nestedArray) {

	let flattenArr = [];
  
	nestedArray.forEach(function(item) {
  	flattenArr.push(...item);
  });
  
  return flattenArr;
};

console.log(flattenArray(nestedArray)); // [1, 2, 3, 4, 5, 6]

edited Oct 6, 2018 at 16:14

answered Oct 6, 2018 at 16:09

Tarun Majumder

991 silver badge7 bronze badges

Comments

Gajender Singh · Accepted Answer · 2018-11-13 10:28:35Z

0

var arr = [1,[9,22],[[3]]];
var res = [];

function flatten(arr){
for(let i=0;i<arr.length;i++){
if(typeof arr[i] == "number"){
res.push(arr[i]);
}
else if(typeof arr[i] == "object"){
fatten(arr[i]);
}
}
}

Calling function

flatten(arr);
console.log(res);

Result

[1, 9, 22, 3]

answered Nov 13, 2018 at 10:28

Gajender Singh

1,31314 silver badges13 bronze badges

Comments

Rohit · Accepted Answer · 2021-12-10 08:57:37Z

0

// Polyfill flat method

var flatten = a => Array.isArray(a) ? [].concat(...a.map(flatten)) : a;

var deepFlatten = (arr, depth = 1) => {
   return depth > 0 ? arr.reduce((acc, val) => acc.concat(Array.isArray(val) ? deepFlatten(val, depth - 1) : val), [])
                : arr.slice();
}

console.log(deepFlatten([0, 1, 2, [[[3, 4]]]], Infinity));

// You can pass label in place of 'Infinity'

answered Dec 10, 2021 at 8:57

Rohit

72 bronze badges

Collectives™ on Stack Overflow

JavaScript flattening an array of arrays of objects

15 Answers 15

7 Comments

Comments

2 Comments

Comments

Comments

Comments

13 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

15 Answers 15

7 Comments

Comments

2 Comments

Comments

Comments

Comments

13 Comments

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related