CODEWITHSUNDEEP
arraysjsonangularrest
Harish
Harish

Reputation: 61

Cannot get results from json API

I am trying to get results from an json api. I believe the error has to do with the data being nested in the array. I am able to console.log my data from the api and it looks as such.

enter image description here

However, I am unable to display me results in my html. I have looked at other questions such as this but to no avail.

ts.

 getApiResult(){
    if(this.searchvalue != null && this.searchyear != null){
      this.apiService.loadAll(this.searchvalue,this.searchyear).subscribe(data => {
        this.data = data
        console.log(data)
      });
    }
  }

html.

<div *ngFor="article of data;index as i">
                <div class="card" class="cardpadding">
                    <div class="card-body">
                        <h5 class="card-title" class="display-4" style="font-size: 32px; text-align: center;">
                            {{article.Results[i].Model_Name}}
                        </h5>
                    </div>
                </div>
            </div>

Upvotes: 0

Views: 125

Answers (3)

Jimmy
Jimmy

Reputation: 56

first of all, its not <div class="card" class="cardpadding"> but rather <div class="card cardpadding"> with class names in one attribute separated by <space>. In your example only the last class gets applied. About your data: You assign this.data = data. Where data is just an object. Instead you should change the *ngFor to

*ngFor="article of data.Results"

and later use article directly without the index i.

{{article.Model_Name}}

Edit: I just realized you are also missing the "let" in the *ngFor e.g.

*ngFor="let article of data.Results"

Upvotes: 1

Himanshu Singh
Himanshu Singh

Reputation: 2165

Try replacing below html template with yours. You are wrongly iterating.

<div *ngFor="article of data.Results;index as i">
            <div class="card" class="cardpadding">
                <div class="card-body">
                    <h5 class="card-title" class="display-4" style="font-size: 32px; text-align: center;">
                        {{article.Model_Name}}
                    </h5>
                </div>
            </div>
        </div>

Upvotes: 0

Pradipta Sarkar
Pradipta Sarkar

Reputation: 11

Seems to have wrong dataType for ngFor. From your code it shows data is not an array rather just a single object. I thik you should iterate data.Results.

Upvotes: 1

Related Questions