如何遍历具有未知键和值的对象

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; }