Flattening Parent Child JSON Array with Javascript

Question

I have an array that look like the below.

const arr = [{
  name: 'x',
  type: 'type1',
  parent: [{
    name: "a",
    type: 'type1'
  }]
}, {
  name: 'y',
  type: 'type1',
  parent: [{
    name: "b",
    type: 'type1'
  }]
}];

I want to flatten this and end up with a result that look like this:

const arr = [{
  name: 'x',
  type: 'type1',
  parent-name:'a',
  parent-type: 'type1'
  },
  {
  name: 'y',
  type: 'type1',
  parent-name: 'b',
  parent-type: 'type1'
}];

I have tried various different solutions using map and array.prototype.flat() but can't quiet get it to work. I will never have more than one child and if there were to be a second child then I am fine that it creates 2 rows from this.

Thanks Michael

Answer 1

One approach would be to use Map() .

result = arr.map(obj => {
  obj.parent.forEach(item => {
    Object.keys(item).forEach(value => {
     obj["parent-" + value] = item[value];
    });
  });

  delete obj.parent;

  return obj;
});

Live Example:

 const arr = [{ name: 'x', type: 'type1', parent: [{ name: "a", type: 'type1' }] }, { name: 'y', type: 'type1', parent: [{ name: "b", type: 'type1' }] }] result = arr.map(obj => { obj.parent.forEach(item => { Object.keys(item).forEach(value => { obj["parent-" + value] = item[value]; }); }); delete obj.parent; return obj; }); console.log(result); 

Answer 2

This will flatten any JSON array upto Level 2, as you asked.

Object.flatten = function(data){
    var resultMain = [];
    var result = {};
    function recurse(cur, prop){
        if (Object(cur) !== cur){
            result[prop] = cur;
        }else if(Array.isArray(cur)){
             for(var i=0, l=cur.length; i<l; i++)
                 recurse(cur[i], prop);
            if(l == 0)
                result[prop] = [];
        }else{
            var isEmpty = true;
            for(var p in cur){
                isEmpty = false;
                recurse(cur[p], prop ? prop+"-"+p : p);
            }
            if(isEmpty && prop)
                result[prop] = {};
        }
    }
    for(var i=0; i<data.length; i++){
        result = {};
        recurse(data[i], "");
        resultMain[i] = result;
    }
    return resultMain;
}

Object.flatten() in action:

 const arr = [{ name: 'x', type: 'type1', parent: [{ name: "a", type: 'type1' }] }, { name: 'y', type: 'type1', parent: [{ name: "b", type: 'type1' }] }]; Object.flatten = function(data){ var resultMain = []; var result = {}; function recurse(cur, prop){ if (Object(cur) !== cur){ result[prop] = cur; }else if(Array.isArray(cur)){ for(var i=0, l=cur.length; i<l; i++) recurse(cur[i], prop); if(l == 0) result[prop] = []; }else{ var isEmpty = true; for(var p in cur){ isEmpty = false; recurse(cur[p], prop ? prop+"-"+p : p); } if(isEmpty && prop) result[prop] = {}; } } for(var i=0; i<data.length; i++){ result = {}; recurse(data[i], ""); resultMain[i] = result; } return resultMain; } console.log(Object.flatten(arr));