Reading JSON into arrays in Angular (HttpClient)

Question

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

So, what are you doing, what do you expect to happen, and what happens instead? — JB Nizet
– JB Nizet, Commented Mar 11, 2018 at 20:35
i want to pass these arrays to E-chart, but i dont seem to be able to get these arrays from JSON, i will edit the question — Augustus
– Augustus, Commented Mar 11, 2018 at 20:36
Again, this is extremely vague. What are you doing? (post the code), what do you expect to happen (precisely), and what happens instead (precisely)? — JB Nizet
– JB Nizet, Commented Mar 11, 2018 at 20:37
i hope it is clearer now, i cannot get the JSON items in the Arrays — Augustus
– Augustus, Commented Mar 11, 2018 at 20:43
The JSON is an array. Arrays don't have any data, label or tooltip property. Each of the objects inside the array has such properties. Stop using any. Define the types you're actually using. And learn how to use arrays, because that seems to be your problem for now. — JB Nizet
– JB Nizet, Commented Mar 11, 2018 at 20:48

Abd0m1nals · Accepted Answer · 2018-03-11 20:55:31Z

2

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

edited Mar 11, 2018 at 20:55

answered Mar 11, 2018 at 20:48

Abd0m1nals

2,48615 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Augustus Over a year ago

Thanks, this is what i was looking for, i still get the error "ERROR Error: Uncaught (in promise): TypeError: undefined is not a function", any idea?

Abd0m1nals Over a year ago

I can't tell exactly, debug and let me know exactly where the error triggers (in which line of code the problem occurs)

Kalani Bright Over a year ago

It is perfectly valid to have an array, number, boolean, string as the root element in a JSON document. In fact, an array can be used to represent a list of objects or values, which can be useful for certain types of data. [ "apple", "banana", "orange"] or 42 or true However, it's important to note that many APIs and services that consume JSON data may expect the root element to be an object and that's really the heart of the problem why it needs to be an object...not because it is or isnʻt a "valid JSON structure"...because the JSON spec allows many types at root.

Collectives™ on Stack Overflow

Reading JSON into arrays in Angular (HttpClient)

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related