0

enter image description here 

onFetchData() {
this.http
  .get('https://financialmodelingprep.com/api/v3/company/stock/list')
  .pipe(
    map((respData) => {
      console.log('respData : ', respData);
  }))
  .subscribe(item => {

  });
}

Need help trying to get property name from API I'm calling above, I'm using angular for the first time. Looking to return object so I can access the properties like name or exchange.

bernlt
  • 405
  • 2
  • 8
  • 20
  • is that your respData in the picture? – Sunil Lama Mar 09 '20 at 01:40
  • 1
    First of all, don't use `HttpClient` in components, move it into a service. Then you can add the generic parameter of `.get` method like this `this.http.get`. `MyTypeDto` is an interface of json that your server sent. And finally use `map` only when you want to change the incoming data, it's like `map` method in array, you use it to create a new array with new data, right? If you want to do some side effect like `console.log` then use `tap`. – epsilon Mar 09 '20 at 05:42

2 Answers2

2

Firstly, I would encourage you to create interfaces for your data models. They don't have to match what your API returns, but in your case it makes sense because the API response is well named.

export interface Stock {
  name: string;
  exchange: string;
}

Create a service that will make your API calls. The service won't invoke the http request itself, it will just return the observable. The service knows how it is going to make the call, and the component knows when the call should be made.

stock.service.ts

fetchData(): Observable<Stock[]> {
  return this.http
    .get('https://financialmodelingprep.com/api/v3/company/stock/list')
    .pipe(
      map((response: any) => response.symbolsList)
    );
}

Inject the service into your component and invoke the call whenever you want to. Set a public property so that your HTML can "see" it.

component.ts

export class MyComponent {
  constructor(private stockService: StockService) { }
  stocks: Stock[];

  onFetchData() {
    this.stockService.fetchData().subscribe((stocks: Stock[]) => {
      this.stocks = stocks;
    });
  }
}

Then bind to the data in your HTML:

component.html

<div *ngFor="let stock of stocks">
  {{stock.name}}: {{stock.exchange}}
</div>

DEMO: https://stackblitz.com/edit/angular-waymkr

Kurt Hamilton
  • 12,490
  • 1
  • 24
  • 40
  • Is the service.ts I can access response.symbolsList, but if I do the same inside component is does not work, is there reason to force you to work with service and not component? I understand what need to be done using services, is it possible to do similar using component with httpclientmodule for example, thanks for complete answer – bernlt Mar 09 '20 at 10:41
  • I don't understand? In my example the service extracts the required data from the response. You don't need to know about `response.symbolsList` in the component - the service just returns an array of the items that the component is interested in – Kurt Hamilton Mar 09 '20 at 10:44
  • I've added a demo stackblitz to my answer. Also, I made a typo in my service - I should have been returning observable. – Kurt Hamilton Mar 09 '20 at 10:51
1

You are returning nothing in map function so you cannot get any data.

Don't use map. Then you will get an object that has symbolsList property.

onFetchData() {
  this.http
    .get('https://financialmodelingprep.com/api/v3/company/stock/list')
    .subscribe(item => {
        console.log('respData : ', item);
    });
}
zmag
  • 7,825
  • 12
  • 32
  • 42
  • I was trying to do the same you mention when I created post here, I not being able to access response data is {symbolslist: array(1385)}, I understand this is JSON, do I need to parse it, I used an map to create array, I can't just do item. SymbolsList – bernlt Mar 09 '20 at 10:36