Fetch array of 'data' from HTTPClient API call using Observables in Angular

Question

I have a service from which I want to access data which are in this form from an HTTP GET request:

   "data": [
    {
        "id": "432",
        "Time": "06:25",
        "Place": "Atalanta"
    },
    {
        "id": "581",
        "Time": "18:21",
        "Place": "Georgia"
    }
   ]

I've created a service to call it which does this return method

return this.http.get<DataGroup>(url);

and two class models to access those data:

import { DataGroupValue } from './DataGroupValue';

export class DataGroup{
    value: DataGroupValue[] = [];
}

(don't know if it's doing the job right though)


export class DataGroupValue {
    id: string;
    Time: string;
    Place: string;
}

and a component that tries to call this method which doesn't work

export class TestPlannerComponent implements OnInit {

  DataGroupValues = new Array<DataGroup>();

  constructor(private dataService: DataService ) { }

  ngOnInit(): void {
    this.dataService.GetDataGroup.subscribe((res:DataGroup))=>{
        this.DataGroupValues=res; //errors here
      }
  }

}

How can we access those values?

what is the error you are getting?

Owen Kelvin
– Owen Kelvin

2021-05-14 14:17:26 +00:00
Commented May 14, 2021 at 14:17 — Owen Kelvin
– Owen Kelvin, Commented May 14, 2021 at 14:17

AVJT82 · Accepted Answer · 2021-05-14 16:46:56Z

2

Your types do not match at all, so Typescript corrently tells you that. If you are indeed receiving response as an object data that contains an array:

 {
   "data": [
    {
        "id": "432",
        "Time": "06:25",
        "Place": "Atalanta"
    },
    {
        "id": "581",
        "Time": "18:21",
        "Place": "Georgia"
    }
   ]
}

You need to create models that match these properties. I like to use interfaces:

export interface DataGroupResponse {
  data: DataGroupValue[]; // use 'data' as that is what you are getting!
}

export interface DataGroupValue {
  id: string;
  Time: string;
  Place: string;
}

Then you need to correctly tell http what you are receiving, so what you are receiving as response is of type DataGroupPayload. Here I would already extract the array from data and send back the array as DataGroupValue:

import { map } from 'rxjs/operators';

// ...

getDataGroup(): Observable<DataGroup[]> { // send back the array
  return this.http.get<DataGroupPayload>(url).pipe(  // what you are receiving is "DataGroupPayload"
    map((data: DataGroupPayload) => data.data as DataGroupValue[])
  )
}

Then in your component,

dataGroupValues = <DataGroupValue[]>[]; // array

ngOnInit(): void {
  this.dataService.getDataGroup().subscribe((res: DataGroupValue[]))=>{
     this.dataGroupValues = res;
  }
}

PS, notice I used camelCase, it's ususally how we name functions/variables.

answered May 14, 2021 at 16:46

AVJT82

73.6k25 gold badges146 silver badges170 bronze badges

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

1 Comment

Dan Over a year ago

Thank you for the reply! Seems like some components' names might need to be a bit changed to make it clearer. For example DataGroupPayload and DataGroupValue[], they don't work if you name them accordingly. If you could, rename them for clarification. The solution seems to be fine nonetheless based on opinions I got from others as well. Thanks again. (edit: getDataGroup(): Observable<DataGroup[]> and data.data as DataGroupValue[] are giving me an error because they are not the same type. Should them both be DataGroupValue[]? That's the only thing that doesn't currently give me error)

Kevin Dávila · Accepted Answer · 2021-05-14 14:20:43Z

0

DataGroupValues = new Array();

DataGRoupValues does not need to be an array, since the data it has inside is already an array and with that you must work the data

Just change to

DataGroupValues; or DataGroupValues = {};

answered May 14, 2021 at 14:20

Kevin Dávila

264 bronze badges

Collectives™ on Stack Overflow

Fetch array of 'data' from HTTPClient API call using Observables in Angular

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related