首页 > 解决方案 > 如何在 JSON Javascript 中引用兄弟元素?

问题描述

我有一个用于图表的 json 对象,如下所示:

{
  "results": [
    {
      "dataSets": {
        "One": {
          "label": "testLabel",
          "labels": "test",
          "data": [
            "10",
            "58"
          ]
        }
      },

      "chart": [
        {
          "key": "test",
          "label": "chart-1",
          "chartType": "bar",
          "order": "1",
          "dataSets": [
            {
              "style": "line",
              "key": "One"
            },
          ]
        }
      ]
    }
  ]
}

我想通过提供“<code>one”作为键来获取“<code>one”中的“ <code>one”之类的dataSets值。labellabelsdatachartdataSets

可以用javascript或vue做吗?

标签: jsonvue.jsjavascript-objectssiblings

解决方案


是的,有可能。但是你需要做一系列的Array.map()事情来实现这一点。

const results = [{
  dataSets: {
    One: {
      label: "testLabel",
      labels: "test",
      data: ["10", "58"]
    }
  },

  chart: [{
    key: "test",
    label: "chart-1",
    chartType: "bar",
    order: "1",
    dataSets: [{
      style: "line",
      key: "One"
    }]
  }]
}];

const modifiedResult = results.map(result => {
  const outerDataSets = result.dataSets;
  result.chart = result.chart.map(chart =>
    chart.dataSets.map(innerDataSet => ({
      ...innerDataSet,
      ...outerDataSets[innerDataSet.key]
    }))
  );
  return result;
});

console.log(modifiedResult);

此外,如果您使用 Vue,我认为最好将修改result放在计算上,以便它始终尝试将这些dataSets额外数据添加到图表的数据集中。

这是在 Vue 中实现的示例演示


推荐阅读