CODEWITHSUNDEEP
jsonangularngfor
ananya
ananya

Reputation: 1041

Render HTTP-Response as a list in Angular2

I have a json response like this.

{
  "response": {
    "data": {
      "customers": [{
        "customerNumber": "123",
        "customerName": "ABC",
        "customeraddresse": [{
          "address": "test"
        }]
      }, {
        "customerNumber": "345",
        "customerName": "CDS",
        "customeraddresse": [{
          "address": "test1"
        }]
      }]
    }
  }
}

I am doing a request like this to get the response data. And it will be returned, as I already checked. 

public getData(): Promise<any> {
  let payload = JSON.stringify( ... );
  let headers = new Headers({ 'Content-Type': 'application/json'});

  return this.http.post(this.url, payload, { headers: headers })
             .toPromise()
             .then(res => {                  
                this.response_data = res.json().response.data;                  
                return this.response_data;
             })
             .catch(this.handleError);
}

But the problem is, that I want to get the value of customerNumber and customerName, and display them in a list

In this example, there are two customers, so this markup should be rendered two times:

<div>
  <div>CustomerNumber</div>
  <div>CustomerName</div>
</div>

Upvotes: 0

Views: 228

Answers (1)

EldarGranulo
EldarGranulo

Reputation: 1615

You should use an *ngFor loop.

In your template:

<div *ngFor="let customer of response_data.customers">
      <div>{{customer.customerNumber}}</div>
      <div>{{customer.customerName}}</div>
</div>

Upvotes: 5

Related Questions