Flatten eine verschachtelte Array von Objekten über ein Array-Feld

Question

Haben Sie ein Objekt a1 =

[{name:'x',age:21, addr:[{flat:1,add:'xyz'},{flat:2,add:'xsr'}]}, 
{name:'y',age:22, addr:[{flat:3,add:'xyz1'},{flat:4,add:'xsr1'}]] 

gewünschte Ausgabe:

[{name:'x',age:21, addr:{flat:1,add:'xyz'}}, 
{name:'x',age:21, addr:{flat:2,add:'xsr'}}, 
{name:'y',age:22, addr:{flat:3,add:'xyz1'}, 
{name:'y',age:22, addr:{flat:4,add:'xsr1'}] 

Bitte machen! Ich versuche dies mit lodash/unterstrich zu erreichen.

Answer 1

Karte jedes Element im ursprünglichen Array in ein neues Array, mit einer Reihe von Elementen nach der Anzahl der addr Felder aus. Mit concat reduzieren Sie alles zu einem neuen Array.

Sie können neue Elemente mit Object.assign() erstellen, wenn Sie mit babel oder ähnlichem nach ES5 transponieren, da dies nicht vom IE unterstützt wird. Da Sie eckig verwenden, können Sie stattdessen angular.extend verwenden.

ES5:

var arr = [ 
 
    {name:'x',age:21, addr:[{flat:1,add:'xyz'},{flat:2,add:'xsr'}]}, 
 
    {name:'y',age:22, addr:[{flat:3,add:'xyz1'},{flat:4,add:'xsr1'}]} 
 
]; 
 
    
 
var result = [].concat.apply([], arr.map(function(item) {  
 
    return item.addr.map(function(addr) { 
 
    return angular.extend({}, item, { addr: addr }); 
 
    }); 
 
})); 
 

 
console.log(result);

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>

ES6:

const arr = [ 
 
    {name:'x',age:21, addr:[{flat:1,add:'xyz'},{flat:2,add:'xsr'}]}, 
 
    {name:'y',age:22, addr:[{flat:3,add:'xyz1'},{flat:4,add:'xsr1'}]} 
 
]; 
 
    
 
const result = [].concat(...arr.map((item) => item.addr.map((addr) => Object.assign({}, item, { addr })))); 
 

 
console.log(result);

Answer 2

Sie können das Array und das innere Array zum Erstellen des gewünschten Ergebnisses iterieren.

var array = [{ name: 'x', age: 21, addr: [{ flat: 1, add: 'xyz' }, { flat: 2, add: 'xsr' }] }, { name: 'y', age: 22, addr: [{ flat: 3, add: 'xyz1' }, { flat: 4, add: 'xsr1' }] }], 
 
    result = array.reduce(function (r, a) { 
 
     return r.concat(a.addr.map(function (b) { 
 
      return { name: a.name, age: a.age, addr: b }; 
 
     })); 
 
    }, []); 
 

 
console.log(result);

ES6

var array = [{ name: 'x', age: 21, addr: [{ flat: 1, add: 'xyz' }, { flat: 2, add: 'xsr' }] }, { name: 'y', age: 22, addr: [{ flat: 3, add: 'xyz1' }, { flat: 4, add: 'xsr1' }] }], 
 
    result = array.reduce((r, a) => r.concat(a.addr.map(b => ({ name: a.name, age: a.age, addr: b }))), []); 
 

 
console.log(result);

Answer 3

Sie reduce() verwenden können, forEach() und Object.assign() gewünschte Ergebnis zurückzukehren.

var data = [{name:'x',age:21, addr:[{flat:1,add:'xyz'},{flat:2,add:'xsr'}]}, 
 
{name:'y',age:22, addr:[{flat:3,add:'xyz1'},{flat:4,add:'xsr1'}]}]; 
 

 
var result = data.reduce(function(r, o) { 
 
    o.addr.forEach(function(e) { 
 
    r.push(Object.assign({name: o.name, age: o.age}, e)); 
 
    }) 
 
    return r; 
 
}, []); 
 

 
console.log(result)