Question

我正在尝试使用HttpClient将JSON读入不同的数组，以便在Echarts中使用，但由于我是一个新手，我无法找到如何将JSON填充到不同的数组中。

我到目前为止使用的零件代码是：

....
     label: Array<any>;
     data: Array<any>;
     tooltip: Array<any>;

      constructor(private http: HttpClient) {
              this.getJSON().subscribe(data => {
              this.data=data.data;
              this.label=data.label;
              this.tooltip=data.tooltip;
              console.log(data)
          });
      }

      public getJSON(): Observable<any> {
          return this.http.get("./assets/JSONData/TeamProgress.json")
      }

JSON文件的格式如下：

    [{"label":"0","data":"0","tooltip":"0"},
{"label":"1","data":"-1","tooltip":" tooltip1"},
{"label":"2","data":"-1","tooltip":" tooltip2"},
...etc

我希望能够在一个数组中获取所有JSON标签，在另一个数组中获取所有数据，并在第三个数组中获取所有工具提示。

如果你可以帮助我，那就太棒了。

感谢

Answer 1

首先，该文件的结果应该是有效的JSON结构（也就是具有键值的对象），您可以将数组分组到按示例result调用的键下

{
 "result": [
  {"label":"0","data":"0","tooltip":"0"},
  {"label":"1","data":"-1","tooltip":" tooltip1"},
  {"label":"2","data":"-1","tooltip":" tooltip2"},
  //....Etc
 ]
}

然后您可以使用以下地图访问数据并对其进行过滤：

this.getJSON().subscribe((data:any) => {
 this.label = data.result.map(element => 
   // if you want to return an array of objects
   {return {"label": element.label}}
   // or if you want to return the raw values in an array, just do
   element.label
 });
 this.data = data.result.map(element => {
  return {"data": element.data}
 });
 this.tooltip = data.result.map(element => {
  return {"tooltip": element.tooltip}
 })
})

在Angular中将JSON读入数组（HttpClient）

1 个答案: