CODEWITHSUNDEEP
angularhttphttpclientangular-httpclient
user84
user84

Reputation: 865

Getting "Cannot read property 'of' of undefined" using angular 8, and httpclient

I have configured my project with new httpclient using following service. AppModule.ts is setup correctly

getAllLocosByID(locoID: string) {
    return this.http.get<Search[]>(`${environment.apiUrl.searchbylocoid}/${locoID}`);
}

Also Search is set to be

export class Search {
    input: string;
    warningMessages: String[];
    errorMessages: String[];
    numFound: number;
    results: String[];
    APP_CODE: string;
}

on my component I have

logoSearchResults: Search[];
constructor(private data: DataAccessService) { }    
getLocmotives() {
    this.data.getAllLocosByID('A1').subscribe((res: Search[]) => {
    // console.log(Array.of(res));
    // console.log(typeof (response));
    // this.logoSearchResults = res;
    this.logoSearchResults = { ...res };
    console.log(this.logoSearchResults);
 },
  error => {
    console.log("error");
  })
}

which gives me following on the browser console. Based on httpclient documents returning response is already an observable json which I am forming it to a Search[]

{input: "A1", warningMessages: Array(0), errorMessages: Array(0), numFound: 241, results: Array(3), …}

So far, so good!. but lets put it on HTML part, and show it to the end user

I put a button on the HTML that works with click

<button class="btn btn-primary" (click)="getLocmotives()">
   Give me answer
</button>
{{ logoSearchResults }}

This is what I get on screen from {{ logoSearchResults }}

[object object]

by updating HTML codes to loop through this array to

<ul class="list-group">
  {{ logoSearchResults }}
  <li class="list-group-item" *ngFor="let result of logoSearchResults">
     {{ result }}
  </li>
</ul>

I am getting following error

ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

By updating HTML codes to 

<ul class="list-group">
 {{ logoSearchResults }}
 <li class="list-group-item" *ngFor="let result of Array.of(logoSearchResults)">
    {{ result }}
 </li>

I am getting following error

ERROR TypeError: Cannot read property 'of' of undefined

What should I do in HTML or angular part to be able to show my data on scree?

Upvotes: 0

Views: 1117

Answers (3)

Jens Alenius
Jens Alenius

Reputation: 1931

Its this line that’s the problem this.logoSearchResults = { ...res }; Your putting the res into an object. You can’t loop with of on a object. And I see that you service 

this.http.get<Search[]>

should return an Array of Search so you should have

this.logoSearchResult=res;

And in your loop change to 

{{ result|json }}

Upvotes: 0

tano
tano

Reputation: 2817

you should add an array to ngfor: *ngFor="let result of logoSearchResults.results"

Upvotes: 1

GreedyAi
GreedyAi

Reputation: 2839

try 

<pre>{{ logoSearchResults | json}}</pre>

json pipe will show you your exact json.

< pre > will also align json so its readable.

Upvotes: 0

Related Questions