0

Tenho um JSON no seguinte formato:

[
  {
    "Countrys": [
      "Cyprus",
      "Finland",
      "Germany",
      "Grenada",
      "Haiti",
      "Ireland",
      "North Korea",
      "Swaziland",
      "Turkmenistan",
      "Zambia"
    ],
    "ListDataPerYear": [
      {
        "Year": 2011,
        "ListValues": [
          2110,
          6540,
          3870,
          0,
          387,
          2870,
          566,
          0,
          4770,
          609
        ]
      },
      {
        "Year": 2012,
        "ListValues": [
          1960,
          6280,
          3880,
          0,
          396,
          2850,
          574,
          0,
          4850,
          620
        ]
      },
      {
        "Year": 2013,
        "ListValues": [
          1690,
          6120,
          3940,
          0,
          393,
          2810,
          434,
          0,
          4880,
          635
        ]
      }
    ]
  }
]

Preciso usar esse JSON para gerar um gráfico de linha (Line Charts do google charts). Caso queiram ver um exemplo de como será o gráfico, será algo como está no snippet oculto abaixo:

      google.charts.load('current', {'packages':['line']});
      google.charts.setOnLoadCallback(drawChart);

    function drawChart() {

      var data = new google.visualization.DataTable();
            data.addColumn('number', 'Ano');
            data.addColumn('number', 'Cyprus');
            data.addColumn('number', 'Finland');
            data.addColumn('number', 'Germany');
            data.addColumn('number', 'Grenada');
            data.addColumn('number', 'Haiti');
            data.addColumn('number', 'Ireland');
            data.addColumn('number', 'North Korea');
            data.addColumn('number', 'Swaziland');
            data.addColumn('number', 'Turkmenistan');
            data.addColumn('number', 'Zambia');

            data.addRows([
                [2011, 2110, 6540, 3870, 321, 387, 2870, 566, 630, 4770, 609],
                [2012, 1960, 6280, 3880, 407, 396, 2850, 574, 900, 4850, 620],
                [2013, 2930, 6120, 3940, 201, 393, 2810, 434, 1500, 4880, 635]
            ]);

      var options = {
        chart: {
          title: 'Box Office Earnings in First Two Weeks of Opening',
          subtitle: 'in millions of dollars (USD)'
        },
        width: 800,
        height: 400
      };

      var chart = new google.charts.Line(document.getElementById('linechart_material'));

      chart.draw(data, google.charts.Line.convertOptions(options));
    }
  <html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  </head>
  <body>
    <div id="linechart_material"></div>
  </body>
</html>

Para isso preciso mapear o JSON para um array no formato abaixo:

[
    [Year, ListValues[0],  ListValues[1],  ListValues[2], ...,  ListValues[9]],
    ...
]

Ficando assim:

[
    [2011, 2110, 6540, 3870, 0, 387, 2870, 566, 0, 4770, 609],
    [2012, 1960, 6280, 3880, 0, 396, 2850, 574, 0, 4850, 620],
    [2013, 1690, 6120, 3940, 0, 393, 2810, 434, 0, 4880, 635]
]

Eu já consegui formatar o array, mas gostaria de saber se tem alguma forma de mapear esse formato de JSON de forma mais simples do que essa que fiz abaixo:

var result = [
  {
    "Countrys": [
      "Cyprus",
      "Finland",
      "Germany",
      "Grenada",
      "Haiti",
      "Ireland",
      "North Korea",
      "Swaziland",
      "Turkmenistan",
      "Zambia"
    ],
    "ListDataPerYear": [
      {
        "Year": 2011,
        "ListValues": [
          2110,
          6540,
          3870,
          0,
          387,
          2870,
          566,
          0,
          4770,
          609
        ]
      },
      {
        "Year": 2012,
        "ListValues": [
          1960,
          6280,
          3880,
          0,
          396,
          2850,
          574,
          0,
          4850,
          620
        ]
      },
      {
        "Year": 2013,
        "ListValues": [
          1690,
          6120,
          3940,
          0,
          393,
          2810,
          434,
          0,
          4880,
          635
        ]
      }
    ]
  }
];

var arrayAux = result.map(value => value.ListDataPerYear)[0];
var dataArray = [ arrayAux.map(value => value.Year), arrayAux.map(value => value.ListValues) ];

var dataLineChart = [];
arrayLength = dataArray.length;

//Montar array com valores (cada ano representa um linha)
for (var i = 0; i < dataArray[0].length; i++) {
	var row = [];
	row.push(dataArray[0][i]);
	for (var j = 0; j < dataArray[1][i].length; j++) {
		row.push(dataArray[1][i][j]);
	}
	dataLineChart.push(row);
}

console.log(dataLineChart);

1 Resposta 1

2

var result = [
  {
    "Countrys": [
      "Cyprus",
      "Finland",
      "Germany",
      "Grenada",
      "Haiti",
      "Ireland",
      "North Korea",
      "Swaziland",
      "Turkmenistan",
      "Zambia"
    ],
    "ListDataPerYear": [
      {
        "Year": 2011,
        "ListValues": [
          2110,
          6540,
          3870,
          0,
          387,
          2870,
          566,
          0,
          4770,
          609
        ]
      },
      {
        "Year": 2012,
        "ListValues": [
          1960,
          6280,
          3880,
          0,
          396,
          2850,
          574,
          0,
          4850,
          620
        ]
      },
      {
        "Year": 2013,
        "ListValues": [
          1690,
          6120,
          3940,
          0,
          393,
          2810,
          434,
          0,
          4880,
          635
        ]
      }
    ]
  }
];

var dataLineChart = result[0].ListDataPerYear.map(dataPerYear => [ dataPerYear.Year, ...dataPerYear.ListValues ]);
console.log(dataLineChart);

Isso é legível? Acredito que seja a maneira mais prática de se criar o array, mas você consegue entender o que está acontecendo?

3
  • Ficou muito mais elegante, consigo entender sim, mas poderia explicar o motivo do '...' nesse trecho: [ dataPerYear.Year, ...dataPerYear.ListValues ]? Commented 11/03/2019 às 2:38
  • 1
    Os três pontos é o operador spread. Quando utilizado antes de um array, esse operador desconstrói o array e passa cada um dos itens do array como um parâmetro diferente.
    – user141661
    Commented 11/03/2019 às 2:44
  • Perfeito! Se importa de editar e adicionar essa explicação na sua resposta? Me ajudou de mais, sabia que havia uma forma mais prática!! :) Commented 11/03/2019 às 2:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .