合併對象的嵌套數組中的JavaScript

Question

我有對象有相似對象的嵌套數組的數組：

var cars = [ 
    { 
    Plate: '112211', 
    Details: 
     [ 
     { 
      Desc: 'Blah11 Blah Blah', 
     Miles: '111', 
     Color: 'blue' 
     }, 
     { 
      Desc: 'Blah B22lah Blah', 
     Miles: '222', 
     Color: 'green' 
     }, 
     ], 
     Make:'Honda' 
    }, 
     Plate: '223322', 
    Details: 
     [ 
     { 
      Desc: 'Blah Blah B33lah', 
     Miles: '333', 
     Color: 'yellow' 
     }, 
     { 
      Desc: 'Blah B44lah Blah', 
     Miles: '444', 
     Color: 'red' 
     } 
     ], 
     Make:'GMC' 
    }, 
     Plate: '334433', 
    Details: 
     [ 
     { 
      Desc: 'Bl55ah Blah Blah', 
     Miles: '555', 
     Color: 'blue' 
     }, 
     { 
      Desc: 'Blah B66lah Blah', 
     Miles: '666', 
     Color: 'pink' 
     }, 
     ], 
     Make:'Ford' 
    } 
] 

我試圖找到一種方法，把它變成一個新的數組，變平或合併的嵌套數組。我們的目標是將有這樣的：

[ 
    { 
    Plate: '112211', 
    Desc: 'Blah11 Blah Blah', 
    Miles: '111', 
    Color: 'blue', 
    Make:'Honda' 
    }, 
    { 
    Plate: '112211', 
    Desc: 'Blah B22lah Blah', 
    Miles: '222', 
    Color: 'green', 
    Make: 'Honda' 
    }, 
    { 
    Plate: '223322', 
    Desc: 'Blah Blah B333lah', 
    Miles: '333', 
    Color: 'yellow' 
    Make: 'GMC' 
    }, 
    { 
    Plate: '223322', 
    Desc: 'Blah Bl444ah B33lah', 
    Miles: '444', 
    Color: 'red', 
    Make: 'GMC' 
    }, 
    { 
    Plate: '334433', 
    Desc: 'Bl555ah Blah B33lah', 
    Miles: '555', 
    Color: 'blue', 
    Make: 'Ford' 
    }, 
    { 
    Plate: '334433', 
    Desc: 'Blah Bl666ah B33lah', 
    Miles: '666', 
    Color: 'pink', 
    Make: 'Ford' 
    }, 
] 

lodash _.flatten和_.flattenDeep沒有做任何事情。我也試圖做一個_.chain和扁平化，以建立一個新的數組，而是拿出空

var actions = _.chain(cars).flatten("Details"); 

     for (i = 0; i < cars.length; i++) { 
      actions.each(function(action) { 
       list.push(cars[i].Plate); 
       list.push(action); 
       list.push(cars[i].Make); 

Answer 1

下面是代碼

function merge(collection) { 
 
    return _(collection).map(function(obj) { 
 
     return _(obj) 
 
     .pickBy(_.isArray) 
 
     .values() 
 
     .flatten() 
 
     .map(function(dest) { 
 
      return _.merge(dest, _.omitBy(obj, _.isArray)); 
 
     }) 
 
     .value(); 
 
    }) 
 
    .flatten() 
 
    .value(); 
 
} 
 

 
var cars = [{ 
 
    Plate: '112211', 
 
    Details: [{ 
 
    Desc: 'Blah11 Blah Blah', 
 
    Miles: '111', 
 
    Color: 'blue' 
 
    }, { 
 
    Desc: 'Blah B22lah Blah', 
 
    Miles: '222', 
 
    Color: 'green' 
 
    }], 
 
    Make: 'Honda' 
 
}, { 
 
    Plate: '223322', 
 
    Details: [{ 
 
    Desc: 'Blah Blah B33lah', 
 
    Miles: '333', 
 
    Color: 'yellow' 
 
    }, { 
 
    Desc: 'Blah B44lah Blah', 
 
    Miles: '444', 
 
    Color: 'red' 
 
    }], 
 
    Make: 'GMC' 
 
}, { 
 
    Plate: '334433', 
 
    Details: [{ 
 
    Desc: 'Bl55ah Blah Blah', 
 
    Miles: '555', 
 
    Color: 'blue' 
 
    }, { 
 
    Desc: 'Blah B66lah Blah', 
 
    Miles: '666', 
 
    Color: 'pink' 
 
    }], 
 
    Make: 'Ford' 
 
}]; 
 

 
var result = merge(cars); 
 
document.querySelector('#result').innerHTML = JSON.stringify(result, null, 2);

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.5.1/lodash.min.js"></script> 
 
<pre id="result"></pre>

Answer 2

可能有更好的方法來做到這一點，但是這能夠完成任務：

var cars = [ 
 
    { 
 
    Plate: '112211', 
 
    Details: 
 
     [ 
 
     { 
 
      Desc: 'Blah11 Blah Blah', 
 
     Miles: '111', 
 
     Color: 'blue' 
 
     }, 
 
     { 
 
      Desc: 'Blah B22lah Blah', 
 
     Miles: '222', 
 
     Color: 'green' 
 
     }, 
 
     ], 
 
     Make:'Honda' 
 
    }, 
 
    { 
 
     Plate: '223322', 
 
    Details: 
 
     [ 
 
     { 
 
      Desc: 'Blah Blah B33lah', 
 
     Miles: '333', 
 
     Color: 'yellow' 
 
     }, 
 
     { 
 
      Desc: 'Blah B44lah Blah', 
 
     Miles: '444', 
 
     Color: 'red' 
 
     } 
 
     ], 
 
     Make:'GMC' 
 
    }, 
 
    { 
 
     Plate: '334433', 
 
    Details: 
 
     [ 
 
     { 
 
      Desc: 'Bl55ah Blah Blah', 
 
     Miles: '555', 
 
     Color: 'blue' 
 
     }, 
 
     { 
 
      Desc: 'Blah B66lah Blah', 
 
     Miles: '666', 
 
     Color: 'pink' 
 
     }, 
 
     ], 
 
     Make:'Ford' 
 
    } 
 
]; 
 

 
var details = []; 
 
_.each(cars, function(car) { 
 
    var keys = _.keys(car); 
 
    _.each(car.Details, function(dtl) { 
 
    _.each(keys, function(key) { 
 
     if (key !== 'Details') { 
 
     dtl[key] = car[key]; 
 
     } 
 
    }); 
 
    details.push(dtl); 
 
    }); 
 
}); 
 

 
console.log(details); 
 
    
 
document.querySelector('#details').innerHTML = JSON.stringify(details); 
 
document.querySelector('#numDetails').innerHTML = details.length; 
 

<script src="https://cdn.rawgit.com/lodash/lodash/3.0.1/lodash.min.js"></script> 
 
<div id="numDetails"></div> 
 
<div id="details"></div>

我肯定有一個更清潔的方式（使用_.filter或一些這樣的），從鍵刪除「詳細信息」，但我在那裏很困）。

Answer 3

如果壓扁都不行，你可以減少。在這裏，我構建了每個使用參數詳細給出的汽車，以便它們可以保持單形，而如果您選擇的話，它們將被夷爲平地並超越。

理想情況下，你的狀態設置的方式不應該有細節之下的單獨的鍵。避免嵌套它們或將它們保留在真正使用它們的對象上更簡單，如果是這樣的話。

function flattenCarList(prevCars, car) { 
 
    var Details = car.Details; 
 
    delete car.Details; 
 

 
    var carProto = Object.create(car.prototype || null) 
 
    var keys = Object.keys(Details); 
 
    for (var i = 0; i < keys.length; i++) { 
 
    Details[i] = carProto[i] = keys[i]; 
 
    } 
 

 
    var carSet = []; 
 
    for (var i = 0; i < Details.length; i++) { 
 
    carSet.push(new Details[i]); 
 
    } 
 

 
    return prevCars.concat(carSet); 
 
} 
 

 
var cars = [{ 
 
    Make: 'Edzel', 
 
    Plate: 123456, 
 
    Details: { 
 
    Desc: 'Don\'t ask', 
 
    Miles: 32, 
 
    Colour: 'Sickly Green' 
 
    } 
 
}]; 
 

 
// Now let's really get to the point. 
 
cars.reduce(flattenCarList); 
 

 
document.getElementById('status').innerHTML += 'RESULTS:<br />' + JSON.stringify(cars);

<code id="status"></code>