javascript - 解析 JavaScript 对象以呈现 highcharts

Question

我正在尝试解析以下 JavaScript 对象来填充 Highcharts分组图表。我在这里使用 python Flask 框架，但看起来如果我在 JavaScript 中完成这一切，解析这将是最好的。不幸的是，我对 JavaScript 很陌生，不确定如何继续正确解析它。

要添加到此，我希望获得以下数组

action_count、action_list以及找到一种方法来传递created_month和year。可能必须将这两件事结合起来，因为它在这个对象中有两个不同的组件。

这是我想要实现的 JSFiddle。 jsfiddle.net/4bpjw0uq/6

# JSON Object I am trying to Parse.
 {
  "api_response": {
    "total_counts": [
      {
        "created_month": 2, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          16, 
          8, 
          0, 
        ], 
        "action_list": [
          "action 1", 
          "action 2", 
          "action 3", 
          "action 4", 
        ], 
        "total_monthly_actions": 27
      }, 
      {
        "created_month": 3, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          53, 
          50, 
          6, 
        ], 
        "action_list": [
            "action 1", 
            "action 2", 
            "action 3", 
            "action 4"
        ], 
        "total_monthly_actions": 154
      },       
    ], 
    "total_installations": 527
  }
}

这是 Highcharts 示例

    <div class="jumbotron text-center">
        <script src="https://code.highcharts.com/highcharts.js"></script>
        <script src="https://code.highcharts.com/modules/exporting.js"></script>

        <script>


            Highcharts.chart('container', {
                chart: {
                    type: 'column'
                },
                title: {
                    text: 'Actions'
                },
                xAxis: {
                    categories: [
                        '2-17',
                        '3-17',
                        '4-17',
                    ],
                    crosshair: true
                },
                tooltip: {
                    headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                    footerFormat: '</table>',
                    shared: true,
                    useHTML: true
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0
                    }
                },
                series: [{
                    name: 'action 1',
                    data: [49.9, 71.5, 106.4, 129.2]

                }, {
                    name: 'action 2',
                    data: [83.6, 78.8, 98.5, 93.4]

                }, {
                    name: 'action 3',
                    data: [48.9, 38.8, 39.3, 41.4]

                }, {
                    name: 'action 4',
                    data: [42.4, 33.2, 34.5, 39.7]

                }]
            });

        </script>
    </div>

Answer 1

类似于 this will work :

const api =  {
  "api_response": {
    "total_counts": [
      {
        "created_month": 2, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          16, 
          8, 
          0, 
        ], 
        "action_list": [
          "action 1", 
          "action 2", 
          "action 3", 
          "action 4", 
        ], 
        "total_monthly_actions": 27
      }, 
      {
        "created_month": 3, 
        "created_year": 2017, 
        "action_counts": [
          0, 
          53, 
          50, 
          6, 
        ], 
        "action_list": [
            "action 1", 
            "action 2", 
            "action 3", 
            "action 4"
        ], 
        "total_monthly_actions": 154
      },       
    ], 
    "total_installations": 527
  }
};

const createHighChartData = (apiResponse) => {
  let series = [];
  const totalCounts = apiResponse.api_response.total_counts;
  //console.log(apiResponse.api_response.total_counts);

  let temp = []
  totalCounts.map((counts) => {
    //console.log(counts.action_counts);
    const actionCounts = counts.action_counts;
    actionCounts.map((action, i) => {
      //console.log(action, i);
      if (temp[i]){
       temp[i].push(action);
      } else {
        temp.push([action])
      }
    })
  })
  //console.log(temp);

  temp.map((dp, i) => {
    series.push({
      name: "Action " + (i + 1),
      data: dp
    })
  })

  console.log(series);
  return series
}

createHighChartData(api);