parse JavaScript object to render highcharts

Question

I am trying to parse the following JavaScript object to fill a Highcharts grouped chart. I am using python flask framework here but looks like parsing this would be best done if I do it all in JavaScript. Unfortunately Im very new to JavaScript and not sure how to proceed to parse this correctly.

To add to this im looking to get the following arrays

action_count, action_list as well as find a way to pass the created_month and year. Probably would have to combine these two things since its two different components in this object.

here is JSFiddle of what im looking to achieve. 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
  }
}

Here is the highcharts example

    <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

Something like 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);