將嵌套數組轉換為對象，將數組索引與對象ID匹配

Question

我目前正在使用Redux減速器。

 //backend response const response = { data: { results: { 222: { items: ['id1', 'id3'] }, 333: { items: ['id2', 'id4', 'id999 (UNKNOWN)'] } } } }; //currently saved in redux state const stateItems = [ { id: 'id1', name: 'item ONE' }, { id: 'id2', name: 'item TWO' }, { id: 'id3', name: 'item THREE' }, { id: 'id4', name: 'item FOUR' }, { id: 'id5', name: 'item FIVE (UNUSED)' }, { id: 'id6', name: 'item SIX (UNUSED)' } ]; //converting items: ['ids'] => items: [{id: 'id', name: 'itemName'}] const result = Object.values(response.data.results).map((keys, index, array) => { keys.items = keys.items.map(itemId => { return stateItems[stateItems.findIndex(x => x.id === itemId)]; }); return response.data.results; }); //final result should be: const expectedFinalResult = { 222: {items: [{id: 'id1', name: 'item ONE'}, {id: 'id3', name: 'item THREE'}]}, 333: {items: [{id: 'id2', name: 'item TWO'}, {id: 'id4', name: 'item FOUR'}]} }; //both should be equal: console.log(JSON.stringify(expectedFinalResult)); console.log(JSON.stringify(result)); console.log('same result: ' + JSON.stringify(result) === JSON.stringify(expectedFinalResult)); 

我沒有想法，如何實現它。 還應過濾掉UNUSED和UNKNOWN 。 因此，本例中的最終結果就像const expectedFinalResult一樣。 當前， const result返回錯誤的結果。

希望有人有更好的主意或更好的方法。

謝謝

Answer 1

您在Object.entries的正確軌道上。 您可以使用解構來挑選鍵（ '222' ， '333' ）和值對象的items數組，然后使用該數組過濾stateItems並為結果中的每個條目生成items數組：

const result = {};
for (const [key, {items}] of Object.entries(response.data.results)) {
    result[key] = {
        items: stateItems.filter(item => items.includes(item.id))
    };
}

現場示例：

 //backend response const response = { data: { results: { 222: { items: ['id1', 'id3'] }, 333: { items: ['id2', 'id4', 'id999 (UNKNOWN)'] } } } }; //currently saved in redux state const stateItems = [ { id: 'id1', name: 'item ONE' }, { id: 'id2', name: 'item TWO' }, { id: 'id3', name: 'item THREE' }, { id: 'id4', name: 'item FOUR' }, { id: 'id5', name: 'item FIVE (UNUSED)' }, { id: 'id6', name: 'item SIX (UNUSED)' } ]; const result = {}; for (const [key, {items}] of Object.entries(response.data.results)) { result[key] = { items: stateItems.filter(item => items.includes(item.id)) }; } //final result should be: const expectedFinalResult = { 222: {items: [{id: 'id1', name: 'item ONE'}, {id: 'id3', name: 'item THREE'}]}, 333: {items: [{id: 'id2', name: 'item TWO'}, {id: 'id4', name: 'item FOUR'}]} }; //both should be equal: console.log(JSON.stringify(result, null, 4)); 

 .as-console-wrapper { max-height: 100% !important; } 

這使得多次通過stateItems 。 如果它或response.data.results確實很大，真的非常大（例如成千上萬個），那么可能值得通過id來stateItem的Map ：

// Create map of state items (only once each time stateItems changes):
const stateItemMap = new Map(stateItems.map(item => [item.id, item]));

// Map results (each time you get results):
const result = {};
for (const [key, {items}] of Object.entries(response.data.results)) {
    result[key] = {
        items: items.map(id => stateItemMap.get(id))
    };
}

現場示例：

 //backend response const response = { data: { results: { 222: { items: ['id1', 'id3'] }, 333: { items: ['id2', 'id4', 'id999 (UNKNOWN)'] } } } }; //currently saved in redux state const stateItems = [ { id: 'id1', name: 'item ONE' }, { id: 'id2', name: 'item TWO' }, { id: 'id3', name: 'item THREE' }, { id: 'id4', name: 'item FOUR' }, { id: 'id5', name: 'item FIVE (UNUSED)' }, { id: 'id6', name: 'item SIX (UNUSED)' } ]; // Create map of state items (only once each time stateItems changes): const stateItemMap = new Map(stateItems.map(item => [item.id, item])); // Map results (each time you get results): const result = {}; for (const [key, {items}] of Object.entries(response.data.results)) { result[key] = { items: items.map(id => stateItemMap.get(id)) }; } //final result should be: const expectedFinalResult = { 222: {items: [{id: 'id1', name: 'item ONE'}, {id: 'id3', name: 'item THREE'}]}, 333: {items: [{id: 'id2', name: 'item TWO'}, {id: 'id4', name: 'item FOUR'}]} }; //both should be equal: console.log(JSON.stringify(result, null, 4)); 

 .as-console-wrapper { max-height: 100% !important; } 

Answer 2

您可以使用reduce來做到這一點：

Object.entries(response.data.results)
    .reduce((acc, [key, { items }]) => ({
        ...acc,
        [key]: { // we can use the dynamic keys to add in our accumulated object
            items: items
                .map(itemId => stateItems.find(x => x.id === itemId)) // you can use find directly instead of findIndex then access
                .filter(Boolean) // we skip the unneeded elements
        }
    }), {});