How to merge children in multiple JSON objects?

Question

I have the following JavaScript object

[
  {
    "familyName": "Smith",
    "children": [
      {         "firstName": "John"       },
      {         "firstName": "Mike"       }
    ]
  },
  {
    "familyName": "Williams",
    "children": [
      {         "firstName": "Mark"       },
      {         "firstName": "Dave"       }
    ]
  },
  {
    "familyName": "Jones",
    "children": [
      {         "firstName": "Mary"       },
      {         "firstName": "Sue"        }
    ]
  }
]

I’d like to create an array of all children i.e.

[
  {     "FirstName": "John"   },
  {     "FirstName": "Mike"   },
  {     "FirstName": "Mark"   },
  {     "FirstName": "Dave"   },
  {     "FirstName": "Mary"   },
  {     "FirstName": "Sue"    }
]

I am using jQuery.

I have looked at posts that describe merging or concatenating arrays but not those of child arrays: e.g. Merge/flatten an array of arrays in JavaScript?

I believe I could loop through the families and add the children arrays but suspect that there is a 'one-liner' for this?

Lucas · Accepted Answer · 2017-07-13T13:14:02.073

I tested in the console:

//The families(duh)
const families = [
{
    "familyName": "Smith",
    "children": [
      {         "firstName": "John"       },
      {         "firstName": "Mike"       }
    ]
  },
  {
    "familyName": "Williams",
    "children": [
      {         "firstName": "Mark"       },
      {         "firstName": "Dave"       }
    ]
  },
  {
    "familyName": "Jones",
    "children": [
      {         "firstName": "Mary"       },
      {         "firstName": "Sue"        }
    ]
  }
]
//Just flatten the children:
var children = [].concat.apply([], families.map(family => family.children));
//Outputs
console.log(children);

score 2 · Answer 2 · answered Jul 13 '17 at 13:05

2

A solution without jQuery would be to use reduce to extract children from their families (sounds a bit rough, sorry for that).

families.reduce(function(list, family){ 
    return list.concat(family.children);
}, []);

answered Jul 13 '17 at 13:05

Caramiriel

7,029
3
30
50

score 0 · Answer 3 · answered Jul 13 '17 at 13:00

You can do this by using $.map:

var a =  [
  {
    "familyName": "Smith",
    "children": [
      {         "firstName": "John"       },
      {         "firstName": "Mike"       }
    ]
  },
  {
    "familyName": "Williams",
    "children": [
      {         "firstName": "Mark"       },
      {         "firstName": "Dave"       }
    ]
  },
  {
    "familyName": "Jones",
    "children": [
      {         "firstName": "Mary"       },
      {         "firstName": "Sue"        }
    ]
  }
]

console.log($.map(a, function(it){
    return it.children;
}));

// Or ES6
$.map(a, it => it.children);

Result:

[  
   {  
      "firstName":"John"
   },
   {  
      "firstName":"Mike"
   },
   {  
      "firstName":"Mark"
   },
   {  
      "firstName":"Dave"
   },
   {  
      "firstName":"Mary"
   },
   {  
      "firstName":"Sue"
   }
]

score 0 · Answer 4 · edited Jul 13 '17 at 13:21

Try with Array#forEach method .then push the children object with new array

var families = [ { "familyName": "Smith", "children": [ { "firstName": "John" }, { "firstName": "Mike" } ] }, { "familyName": "Williams", "children": [ { "firstName": "Mark" }, { "firstName": "Dave" } ] }, { "familyName": "Jones", "children": [ { "firstName": "Mary" }, { "firstName": "Sue" } ] } ]
var children = [];
families.forEach(family => family.children.forEach(child => children.push(child)));
console.log(children);

How to merge children in multiple JSON objects?

4 Answers4