Question

我正在尝试解析一些json数据，并以一种既易于阅读又对highcharts有效的方式表示它。

从后端我得到以下

{
    "AVN-LON-TEST-A": {
        "mapOfVersionAndCount": {
            "Chrome": {
                "versionAndCountMap": {
                    "61": 2,
                    "62": 2,
                    "63": 2
                }
            },
            "Firefox": {
                "versionAndCountMap": {
                    "57": 2
                }
            }
        }
    },
    "AVN-LON-TEST-B": {
        "mapOfVersionAndCount": {
            "Chrome": {
                "versionAndCountMap": {
                    "63": 1
                }
            }
        }
    }
}

我试图将上面的数据表示为以下

  [{
        name: 'Chrome - 64',
        data: [2,0]
    },
        name: 'Chrome - 63',
        data: [1,2]
    }, {
        name: 'FireFox',
        data: [0,1]
    }]

这是我的代码

 var ossIds = Object.keys(data);
    var browserAndVersions = [];

    ossIds.forEach(function (ossId) {
        var browserNames = data[ossId];

        Object.keys(browserNames.mapOfVersionAndCount).forEach(function(browserName) {
            var versionAndCountMap = browserNames.mapOfVersionAndCount[browserName];
            var versions = Object.keys(versionAndCountMap.versionAndCountMap);
            var counts = Object.values(versionAndCountMap.versionAndCountMap);

            versions.forEach(function(version) {
                var nameAndVersion = browserName + "-" + version;
                browserAndVersions.push({name: nameAndVersion, data: counts});
            });
        });
    });

以上代码似乎打印出以下内容

[{
    "name": "Chrome-61",
    "data": [2, 2, 2]
}, {
    "name": "Chrome-62",
    "data": [2, 2, 2]
}, {
    "name": "Chrome-63",
    "data": [2, 2, 2]
}, {
    "name": "Firefox-57",
    "data": [2]
}, {
    "name": "Chrome-63",
    "data": [1]
}]

我不确定我哪里出错了。任何帮助将不胜感激

更新：数据内容：[2,2] 每个2都是类别

AVN-LON-TEST-A 2

AVN-LON-TEST-B 2

希望有意义

Answer 1

因此，每次看到Object.keys时，通常意味着数据更好地表示为数组而不是对象。但是，这应该有效。它生成一个以浏览器名称/版本为键的对象（因此很容易检查是否存在浏览器/版本组合），然后在最后将其展平为数组。

var data = {
    "AVN-LON-TEST-A": {
        "mapOfVersionAndCount": {
            "Chrome": {
                "versionAndCountMap": {
                    "61": 2,
                    "62": 2,
                    "63": 2
                }
            },
            "Firefox": {
                "versionAndCountMap": {
                    "57": 2
                }
            }
        }
    },
    "AVN-LON-TEST-B": {
        "mapOfVersionAndCount": {
            "Chrome": {
                "versionAndCountMap": {
                    "63": 1
                }
            }
        }
    }
};

var obj = {};
var len = Object.keys(data).length;
Object.keys(data).forEach(function (name, i) {
  Object.keys(data[name].mapOfVersionAndCount).forEach(function (browser) {
    Object.keys(data[name].mapOfVersionAndCount[browser].versionAndCountMap).forEach(function (version) {
      var id = browser + "-" + version;
      if (!obj[id]) obj[id] = Array(len).fill(0);
      obj[id][i] += data[name].mapOfVersionAndCount[browser].versionAndCountMap[version];
    });
  });
});

var out = Object.keys(obj).map(function (key) {
  return {name: key, data: obj[key]};
});
console.log(out);

表示来自Java对象

1 个答案: