将查询结果转换为 json 对象

Question

我正在尝试将 api 从 PHP 转换为 react.js。我的数据如下所示：

s	c	d
A	1	4/1
B	4	4/1
A	2	4/2
B	5	4/2
A	3	4/3
B	6	4/3

我将 json 传递回应用程序，它在 PHP 中是这样构建的。

     $graph_arr['bar']['series'][$s] += (int) $c;
     $graph_arr['line']['series'][$s][] = (int) $c;

生成的 json 看起来像这样

{line: 
   {labels: ['4/1','4/2','4/3'],  //already have this figured out 
    series: [{ name: 'A', data: [1,2,3]},
             { name: 'B', data: [4,5,6]}
  ]}
}

我将如何在 react 中做到这一点，react.js 的新手，所以我不太熟悉一切正常或已构建。

  const graph_data = [['a',1,'4/1'],['a',2,'4/1'],['a',3,'4/1'], 
       ['a',4,'4/4'],['b',5,'4/1'],['b',6,'4/1'],['b',7,'4/1'],['b',8,'4/4']]

     const series = Object.entries(graph_data).map((row,i) => { })

编辑： 找到了这个How to group an array of objects by key。很接近

Answer 1

您可以像在 PHP 中处理数组一样对待它。

jsonData["line"]["series"][0].name

您还可以提取（解构）数据

const jsonData = {
  line: {
    labels: ["4/1", "4/2", "4/3"], //already have this figured out
    series: [
      { name: "A", data: [1, 2, 3] },
      { name: "B", data: [4, 5, 6] }
    ]
  }
};

  const { line } = jsonData;
  const { labels, series } = line;

 {labels}   
 {labels[0]}
 {series.map((data) => data.name)}

我将它们放在一个示例中，并为您提供了几种不同的方式： https://codesandbox.io/s/determined-keller-3ott6?file=/src/App.js