Why cant I access object property in Angular even the property exists. but the same is possible with-CodePudding

this.getdata().pipe().subscribe(data=>console.log(data))

whihc gives me

 {total: 4, page: 1, page_size: 100, cursor: null, result: Array(4), …}
cursor
: 
null
page
: 
1
page_size
: 
100
result
: 
Array(4)
0
: 
{token_address: '0x8c5b9dc5fe8a1151116bfcfb4207912ea0090b60', token_id: '4', amount: '1', owner_of: '0x8b61fc3df7a5dd1972f6187fbc3cc374e9845d2b', token_hash: '91c42919fc66f3988c1e9b0f68aef720', …}
1
: 
{token_address: '0x8c5b9dc5fe8a1151116bfcfb4207912ea0090b60', token_id: '3', amount: '1', owner_of: '0x8b61fc3df7a5dd1972f6187fbc3cc374e9845d2b', token_hash: '98a03354565f77ade5bfacb80d1b46ae', …}
2
: 
{token_address: '0x8c5b9dc5fe8a1151116bfcfb4207912ea0090b60', token_id: '2', amount: '1', owner_of: '0x8b61fc3df7a5dd1972f6187fbc3cc374e9845d2b', token_hash: '7c3a9cd240803578eaf35de07effdb33', …}
3
: 
{token_address: '0x8c5b9dc5fe8a1151116bfcfb4207912ea0090b60', token_id: '1', amount: '1', owner_of: '0x8b61fc3df7a5dd1972f6187fbc3cc374e9845d2b', token_hash: '60a8b1abf25235b3b35d871e0feaebdb', …}
length
: 
4
[[Prototype]]
: 
Array(0)
status
: 
"SYNCED"
total
: 
4

1)I can access result array with JS just like this

const options = {
 method: 'GET',
 url: 'https://deep-index.moralis.io/api/v2/0x8b61FC3df7a5Dd1972f6187Fbc3cc374e9845D2b/nft',
 params: {chain: 'mumbai', format: 'decimal', normalizeMetadata: 'false'},
 headers: {accept: 'application/json', 'X-API-Key': 'api'}
};
axios.request(options).then(function (response) {
console.log(response.data.result);}).catch(function (error) {console.error(error);});

2)But why cant I do it in Angular

 getdata(){
    return this.http.get('https://deep-index.moralis.io/api/v2/0x8b61FC3df7a5Dd1972f6187Fbc3cc374e9845D2b/nft',
    {headers:new HttpHeaders({accept: 'application/json','X-API-Key':this.api,format: 'decimal', normalizeMetadata: 'false'}),params:new HttpParams().set('chain','mumbai')});
  }
      getId(data:any){
    this.ItemClicked = data;
    this.defaultView = true
  }

  ngOnInit(): void {
  this.getdata().pipe().subscribe(data=>console.log(data?.result))
  }

which gives me the error Property 'result' does not exist on type 'Object'. What am I not understanding here and what should I be doing instead?

I'm using subscribe because I want to do something with the data and since the HTTPS gives me an Observable.

CodePudding user response：

The HTTPClient functions to perform HTTP requests are generic. Since you didn't pass the response type to it, your IDE will show this error.

You now have different options, but this is definitely the best one: Pass the response type to your call, e.g. this.http.get<ResponseType>(...) in order to tell the function that this type will be returned.

You should of course define the response type, e.g.:

export interface ResponseType {
  total: number, 
  page: number, 
  page_size: number, 
  cursor?: CursorType, 
  result: ResultType[]
}

Note: CursorType and ResultType are not yet defined, since I do not know your data structure in detail.