my data from api is array but response from it is object

Question

the data of api is array but the response i am getting from it is as an object using following method

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
@Component({
  selector: 'app-shipment',
  templateUrl: './shipment.component.html',
  styleUrls: ['./shipment.component.css'],
})
export class ShipmentComponent implements OnInit {
  li: any;
  shipment = [];
  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get('http://localhost:3000/shipments').subscribe((response) => {
      this.li = response;
    });
  }
  getShipments(): void {
    console.log(this.li);
  }
}

Owen Kelvin · Accepted Answer · 2021-04-13 04:59:19Z

2

By default, the type returned by an http get request is Observable<Object> so you have to tell typescript that you expect an array. This can be simply done by typecating

  ngOnInit(): void {
    this.http.get<any[]>('http://localhost:3000/shipments').subscribe((response) => {
      this.li = response;
    });
  }

OR

  import { tap, map } from 'rxjs/operators';

  ngOnInit(): void {
    this.http.get('http://localhost:3000/shipments')
      .pipe(
         tap(console.log),
         map(x => x as any[])
       )
      .subscribe((response) => {
         this.li = response;
       });
  }

the line tap(console.log), is just for debugging to view the object returned from your api call

answered Apr 13, 2021 at 4:59

Owen Kelvin

15.1k11 gold badges51 silver badges86 bronze badges

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

1 Comment

Bravo Over a year ago

Can you please provide insight to ... Found one library(exceljs) which supports this...stackoverflow.com/questions/67130632/…

Collectives™ on Stack Overflow

my data from api is array but response from it is object

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related