时间戳

首页 > 解决方案 > 将查询结果转换为 json 对象

json - 将查询结果转换为 json 对象

问题描述

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

s C d
一个 1 4/1
乙 4 4/1
一个 2 4/2
乙 5 4/2
一个 3 4/3
乙 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 a array by key。这是接近

标签： jsonreactjs

解决方案

您可以像在 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

推荐阅读