Augustus
Augustus

Reputation: 385

Reading JSON into arrays in Angular (HttpClient)

i am trying to read JSON into different arrays using HttpClient for the use in Echarts, but since i am a newbie i couldn't find how to fill JSON into the different arrays.

the part code i used so far was:

....
     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")
      }

the JSON file is formatted like this:

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

i want to be able to get all labels of JSON in one array, and all data in another array, and all tooltips in a third array.

it would be great if you can help me.

thanks

Upvotes: 1

Views: 1073

Answers (1)

Sletheren
Sletheren

Reputation: 2478

First the result of that file should be a valid JSON structure aka (an object with key-values) you can group the array under a key called per example result

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

Then you can access the data and filter it using map as below:

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}
 })
})

Upvotes: 2

Related Questions