如何使用未知的鍵和值遍歷對象

Question

我從API端點獲得鞋號的JSON響應，如下所示：

data: [{
    0: {
        system: "US",
        sizes: {
            7: {B: 3, C: 6, D: 1, E: 1}
            7.5: {A: 6, B: 7, C: 14, D: 11, E: 2}
            8: {2E: 1, A: 5, B: 32, C: 38, D: 23, …}
            8.5: {2E: 2, A: 9, B: 56, C: 79, D: 61, …}
            9: {2A: 5, 2E: 4, A: 17, B: 92, C: 143, …}
            9.5: {2A: 3, 2E: 3, A: 26, B: 132, C: 194, …}
            10: {2A: 5, 2E: 3, 3A: 1, A: 53, B: 159, …}
        }
    }
}]

數據顯示，例如，美國7號尺碼有四種不同的形狀（B，C，D，E），其中3人的腳型為B。總共11人的尺碼為7。此列表可以包含美國，歐盟的尺碼或不同的系統，形狀的關鍵可以是AZ或基本上其他任何形狀。

我想遍歷sizes並創建一個圖表，以顯示有多少人具有一定的大小，以及多少人具有該大小的某種形狀。

在這樣的對象上循環以獲取每個形狀的值的最佳方法是什么？ 我希望它是一系列尺寸。

ES6或ES7很好，但我更喜歡不使用jQuery。

編輯：讓我更清楚。 首先，我已經考慮過改善數據結構，但是不幸的是這不是一個選擇。

我已經嘗試過Object.keys(sizes)返回鍵數組。 當然，這是前進的一步。 但是我想調用一個函數，該函數返回帶有鍵及其值的對象。 在我看來，該返回值應該是這樣的：

sizes: [
    {
        size: 7,
        total: 11
        shapes: [
            {name: 'B', value: 3},
            {name: 'C', value: 6},
            {name: 'D', value: 1},
            {name: 'E', value: 1}
        ]
    },{...},{...}
]

這有意義嗎？ 當然，長度不是絕對必需包含在對象中。

Answer 1

您可以將對象的所有鍵提取到數組中，然后簡單地對該數組進行迭代。

 var obj = { 'key1': 'val1', 'key2': 'val2' } var keys = Object.keys(obj); // ['key1', 'key2'] keys.forEach( function(key) { var values = obj[key] console.log(values) // do stuff with "values" }) 

---

參考-

• Object.keys()

Answer 2

您可以使用array#map ， Object.keys()和array#reduce 。

 const data = [{system:'US',sizes:{7:{B:3,C:6,D:1,E:1,}, 7.5: { A: 6, B: 7, C: 14, D: 11, E: 2, }, 8: { '2E': 1, A: 5, B: 32, C: 38, D: 23, }, 8.5: { '2E': 2, A: 9, B: 56, C: 79, D: 61, }, 9: { '2A': 5, '2E': 4, A: 17, B: 92, C: 143, }, 9.5: { '2A': 3, '2E': 3, A: 26, B: 132, C: 194, }, 10: { '2A': 5, '2E': 3, '3A': 1, A: 53, B: 159, }, }, }, ]; var result = data.map((obj) => { return Object.keys(obj.sizes).reduce((arr,k) => { let res = Object.keys(obj.sizes[k]).reduce((r, k1) => { r['size'] = k; r.shapes.push({name: k1, value: obj.sizes[k][k1]}); r.total += obj.sizes[k][k1]; return r; },{shapes:[],total:0}); arr.push(res); return arr; },[]); }) console.log(result); 

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

Answer 3

使用Object.keys()和.reduce()對鍵的值求和。

注意 ：我必須清理您的數據，並刪除一個級別以簡化示例。 您需要根據實際數據進行調整。

 const data = [ { system: 'US', sizes: { 7: { B: 3, C: 6, D: 1, E: 1, }, 7.5: { A: 6, B: 7, C: 14, D: 11, E: 2, }, 8: { '2E': 1, A: 5, B: 32, C: 38, D: 23, }, 8.5: { '2E': 2, A: 9, B: 56, C: 79, D: 61, }, 9: { '2A': 5, '2E': 4, A: 17, B: 92, C: 143, }, 9.5: { '2A': 3, '2E': 3, A: 26, B: 132, C: 194, }, 10: { '2A': 5, '2E': 3, '3A': 1, A: 53, B: 159, }, }, }, ]; const { // We use destructuration to make a copy sizes = {} // We assign a default value in case sizes is undefined } = data[0]; const sumOfSizes = {}; // Future object we will fill Object.keys(sizes).forEach((sizeIndex) => { // We get the keys of the object, and loop over it. const size = sizes[sizeIndex]; // For clarity, I assigned the needed value to a var. const sumOfShapes = Object.keys(size).reduce((prevSum, shapeIndex) => { // We get the sub-keys of the object and sum the values of them. const shapeValue = size[shapeIndex]; return prevSum + shapeValue; }, 0); sumOfSizes[sizeIndex] = sumOfShapes; // We assign the sum of shapes to the current shoe size. }); console.log(sumOfSizes);