Displaying JSON Data in Angular Component

Question

I have a service that is getting data from the server

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from "rxjs/Observable";

@Injectable()
export class CardService {

    private url = "http://192.168.100.112:8080/angular";

  constructor(private http: HttpClient) { }

  getCards(): Observable<any>{
  return this.http.get<any>(this.url);
 }
}

And it works fine with my component:

import { Component, OnInit } from '@angular/core';
import { CardService } from '../../services/card.service';

@Component({
    selector: 'cards-list',
    templateUrl: './card.component.html',
    styleUrls: ['./card.component.css']
  })
  export class CardComponent implements OnInit {

  private cardData: any;

  constructor(private svc: CardService) { }

  ngOnInit() {
    this.svc.getCards().subscribe(data =>{
      this.cardData = data;
      console.log(this.cardData)
    })
  }
}

The console is displaying the data I am trying to show on the app.component.html

but the data is not being displayed on the website:

appcomponent.html

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <cards-list></cards-list>
</div>

card.component.html

<div *ngIf="cardData">
  <ul>
    <li *ngFor="let card of cardData">
       <span>{{card.name}}</span>
       <span>{{card.id}}</span>
       <span>{{card.progress}}</span>
       <span>{{card.issue}}</span>
    </li>
  </ul>
</div>

Does anyone know what I am doing wrong?

change private cardData: any; to private cardData:any[] = [];. May this help you — Nishan Dhungana
– Nishan Dhungana, Commented Jun 21, 2018 at 11:32
@Fix3r , your data is a simple object . You cannot loop over a simple object — CruelEngine
– CruelEngine, Commented Jun 21, 2018 at 11:32

Sachila Ranawaka · Accepted Answer · 2018-06-21 11:32:21Z

3

ngFor required an array for loop through. Response coming as an object. make carddata an array and push the response object.

  private cardData: any = [];

  constructor(private svc: CardService) { }

  ngOnInit() {
    this.svc.getCards().subscribe(data =>{
      this.cardData.push(data);
      console.log(this.cardData)
    })
  }

answered Jun 21, 2018 at 11:32

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

4 Comments

EAzevedo Over a year ago

Your first suggestion was this.cardData = [data]; and it worked great. What is the different now? Thanks for the answer

Prachi Over a year ago

@SachilaRanawaka, this will fail if API returns the multiple objects in a form of list next time.

Sachila Ranawaka Over a year ago

if it return an array no need to push. just assign the array object to carddata, it all depend on the response type

EAzevedo Over a year ago

@SachilaRanawaka using the suggested code and based on what you and Prachi said I got it working. Thank you guys

Prachi · Accepted Answer · 2018-06-21 11:52:47Z

3

This code will not work for a single object. You need to return the array even if the record length is 1.

<div *ngIf="cardData">
  <ul>
    <li *ngFor="let card of cardData">
       <span>{{card.name}}</span>
       <span>{{card.id}}</span>
       <span>{{card.progress}}</span>
       <span>{{card.issue}}</span>
    </li>
  </ul>
</div>

edited Jun 21, 2018 at 11:52

answered Jun 21, 2018 at 11:37

Prachi

3,60421 silver badges38 bronze badges

4 Comments

EAzevedo Over a year ago

It actually can return more than one object as well

Prachi Over a year ago

Then you need to change your API, not your code. Change your API to return data in the form of list, even if the record length is 1. Currently, if record length is 1, its returning object, instead of array of objects.

EAzevedo Over a year ago

What do you mean? On the code, I have now an array with two json objects. The solution suggested above only works for one, as stated before.

Prachi Over a year ago

I stated the same. Use your angular code only and make changes in API in case of record length 1.

nagesh kinagi · Accepted Answer · 2019-11-29 12:31:49Z

-2

Define, private cardData: any[]=[];

answered Nov 29, 2019 at 12:31

nagesh kinagi

1

Collectives™ on Stack Overflow

Displaying JSON Data in Angular Component

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related