JavaScript - 將對象的多個 arrays 轉換為基於水平值的 arrays 數組

Question

我有多個 arrays 對象具有相似的鍵， item鍵作為唯一標識符，我需要在一行中顯示每個項目的結果以及每個對象數組的所有數據。

var contracts = [
    {
        item: 'One1',
        item_desc: 'This is item number one',
        quantity: 10,
        unit: 'kg',
        value: 100,
        currency: 'USD'
    },
    {
        item: 'Two2',
        item_desc: 'This is item number two',
        quantity: 20,
        unit: 'kg',
        value: 200,
        currency: 'USD'
    },
    {
        item: 'Three3',
        item_desc: 'This is item number three',
        quantity: 30,
        unit: 'lb',
        value: 300,
        currency: 'GBP'
    },
    {
        item: 'Four4',
        item_desc: 'This is item number four',
        quantity: 40,
        unit: 'kg',
        value: 400,
        currency: 'USD'
    },
];

var orders = [
    {
        item: 'One1',
        item_desc: 'This is item number one',
        quantity: 5,
        unit: 'kg',
        value: 50,
        currency: 'USD'
    },
    {
        item: 'Two2',
        item_desc: 'This is item number two',
        quantity: 10,
        unit: 'kg',
        value: 100,
        currency: 'USD'
    },
    {
        item: 'Three3',
        item_desc: 'This is item number three',
        quantity: 15,
        unit: 'lb',
        value: 15,
        currency: 'GBP'
    }
];

var purchase = [
    {
        item: 'One1',
        item_desc: 'This is item number one',
        quantity: 2,
        unit: 'kg',
        value: 20,
        currency: 'USD'
    },
    {
        item: 'Two2',
        item_desc: 'This is item number two',
        quantity: 5,
        unit: 'kg',
        value: 50,
        currency: 'USD'
    }
];

var locations = [
    {
        item: 'One1',
        item_desc: 'This is item number one',
        quantity: 1,
        unit: 'kg',
        value: 10,
        currency: 'USD'
    },
    {
        item: 'Two2',
        item_desc: 'This is item number two',
        quantity: 5,
        unit: 'kg',
        value: 50,
        currency: 'USD'
    },
    {
        item: 'Three3',
        item_desc: 'This is item number three',
        quantity: 7,
        unit: 'lb',
        value: 70,
        currency: 'GBP'
    },
    {
        item: 'Five5', // entirely new item, does not exist in in any of above array
        item_desc: 'This is item number five',
        quantity: 5,
        unit: 'lb',
        value: 50,
        currency: 'GBP'
    }
];

這些是 arrays，可以多一些，但數據結構保持不變。 我想得到如下結果；

[
    // [
    //     =============== Example for data below -- this row not required ===============     
    //     "item", "item_desc", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency" ...
    //                           ---------> for contacts <----------    ---------> for orders <-----------     ---------> for purchase <----------    ---------> for locations <---------- ...
    // ],
    [
        "One1", "This is item number one", "10 kg", "100 USD", "5 kg", "50 USD", "2 kg", "20 USD", "1 kg", "10 USD"
    ],
    [
        "Two2", "This is item number two", "20 kg", "200 USD", "10 kg", "100 USD", "5 kg", "50 USD", "5 kg", "50 USD"
    ],
    [
        "Three3", "This is item number three", "30 kg", "300 USD", "15 kg", "150 USD", "-", "-", "7 lb", "70 GBP"
    ],
    [
        "Four3", "This is item number four", "40 kg", "400 USD", "-", "-", "-", "-", "-", "-"
    ],
    [
        "Five5", "This is item number five", "-", "-", "-", "-", "-", "-", "5 lb", "50 GBP"
    ],

]

我也在嘗試不同的手動方法（循環等），就像我嘗試在每個對象數組上方循環並推送到一個新數組然后再次檢查下一個數組的項目並繼續進行一樣。

Answer 1

我建議您將所有數據重新映射到以item為鍵的對象中，以避免每次我們需要從中提取某些內容時遍歷數組：

// Create method for remaping
const remap = arr => arr.reduce((acc, el) => {
    acc[el.item] = el;
    return acc;
}, {});
// Collect all data in one place
const allData = {
  contracts: remap(contracts),
  orders:    remap(orders),
  purchase:  remap(purchase),
  locations: remap(locations),
};

參考： .reduce() 。

然后我們可以使用Map來獲取我們擁有的所有項目以避免重復：

// All possible values of 'item' property
const allItems = [ ...new Set([
  ...Object.keys(allData.contracts), 
  ...Object.keys(allData.orders), 
  ...Object.keys(allData.purchase), 
  ...Object.keys(allData.locations)]) 
];

參考： Map 。

現在我們准備通過allData[<arrayName>][<itemProperty>]以我們需要的任何格式收集數據，例如（不要忘記檢查項目是否存在於特定數據對象中）：

const result = [];
for (const item of allItems) {
    // =============== Example for data below -- this row not required ===============     
    //     "item", "item_desc", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency" ...
    //                           ---------> for contacts <----------    ---------> for orders <-----------     ---------> for purchase <----------    ---------> for locations <---------- ...
  result.push([
    item,
    allData.contracts[item] 
      ? allData.contracts[item].item_desc
      : '-',
    allData.contracts[item]
      ? allData.contracts[item].quantity + allData.contracts[item].unit
      : '-',
    allData.contracts[item] 
      ? allData.contracts[item].value + allData.contracts[item].currency
      : '-',
    allData.orders[item]
      ? allData.orders[item].quantity + allData.orders[item].unit
      : '-',
    allData.orders[item] 
      ? allData.orders[item].value + allData.orders[item].currency
      : '-',
    allData.purchase[item]
      ? allData.purchase[item].quantity + allData.purchase[item].unit
      : '-',
    allData.purchase[item] 
      ? allData.purchase[item].value + allData.purchase[item].currency
      : '-',
    allData.locations[item] 
      ? allData.locations[item].quantity + allData.locations[item].unit
      : '-',
    allData.locations[item] 
      ? allData.locations[item].value + allData.locations[item].currency
      : '-',
  ]);
}

完整解決方案：

 const contracts = [ { item: 'One1', item_desc: 'This is item number one', quantity: 10, unit: 'kg', value: 100, currency: 'USD' }, { item: 'Two2', item_desc: 'This is item number two', quantity: 20, unit: 'kg', value: 200, currency: 'USD' }, { item: 'Three3', item_desc: 'This is item number three', quantity: 30, unit: 'lb', value: 300, currency: 'GBP' }, { item: 'Four4', item_desc: 'This is item number four', quantity: 40, unit: 'kg', value: 400, currency: 'USD' }, ]; const orders = [ { item: 'One1', item_desc: 'This is item number one', quantity: 5, unit: 'kg', value: 50, currency: 'USD' }, { item: 'Two2', item_desc: 'This is item number two', quantity: 10, unit: 'kg', value: 100, currency: 'USD' }, { item: 'Three3', item_desc: 'This is item number three', quantity: 15, unit: 'lb', value: 15, currency: 'GBP' } ]; const purchase = [ { item: 'One1', item_desc: 'This is item number one', quantity: 2, unit: 'kg', value: 20, currency: 'USD' }, { item: 'Two2', item_desc: 'This is item number two', quantity: 5, unit: 'kg', value: 50, currency: 'USD' } ]; const locations = [ { item: 'One1', item_desc: 'This is item number one', quantity: 1, unit: 'kg', value: 10, currency: 'USD' }, { item: 'Two2', item_desc: 'This is item number two', quantity: 5, unit: 'kg', value: 50, currency: 'USD' }, { item: 'Three3', item_desc: 'This is item number three', quantity: 7, unit: 'lb', value: 70, currency: 'GBP' }, { item: 'Five5', // entirely new item, does not exist in in any of above array item_desc: 'This is item number five', quantity: 5, unit: 'lb', value: 50, currency: 'GBP' } ]; const remap = arr => arr.reduce((acc, el) => { acc[el.item] = el; return acc; }, {}); const allData = { contracts: remap(contracts), orders: remap(orders), purchase: remap(purchase), locations: remap(locations), }; const allItems = [...new Set([...Object.keys(allData.contracts), ...Object.keys(allData.orders), ...Object.keys(allData.purchase), ...Object.keys(allData.locations)]) ]; const result = []; for (const item of allItems) { // =============== Example for data below -- this row not required =============== // "item", "item_desc", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency", "quantity + unit", "value + currency"... // ---------> for contacts <---------- ---------> for orders <----------- ---------> for purchase <---------- ---------> for locations <----------... result.push([ item, allData.contracts[item]? allData.contracts[item].item_desc: '-', allData.contracts[item]? allData.contracts[item].quantity + allData.contracts[item].unit: '-', allData.contracts[item]? allData.contracts[item].value + allData.contracts[item].currency: '-', allData.orders[item]? allData.orders[item].quantity + allData.orders[item].unit: '-', allData.orders[item]? allData.orders[item].value + allData.orders[item].currency: '-', allData.purchase[item]? allData.purchase[item].quantity + allData.purchase[item].unit: '-', allData.purchase[item]? allData.purchase[item].value + allData.purchase[item].currency: '-', allData.locations[item]? allData.locations[item].quantity + allData.locations[item].unit: '-', allData.locations[item]? allData.locations[item].value + allData.locations[item].currency: '-', ]); } console.log(result);