CODEWITHSUNDEEP
angular
Arthi
Arthi

Reputation: 117

Not able get data into UI but got Console

This is the output i got in the console but i can't able to display it in UI

The thing i want to dispaly the address of customers.But the api is written like mapping address table data into customer table. So,the Output i got is like an address list in a Customer table

So,if am trying to display address from customer table,the bindings are not working i think so.

Can anyone resolve this?

Thanks in advance.

The angular files used are as follow. address.service.ts

@Injectable()
export class AddressService {

  selectedAddress : Address

  constructor(private http: Http) { }

  getCustomerAddress(){
    return this.http.get('http://localhost:49422/api/customer/4/profile');
  }

}

address.component.html

 <div class="col-md-6">
        <button type="button" class="btn btn-lg btn-block btn-primary" style="width: auto" (click)="OnCustomerAddressClick()">
            GetCustomerAddress
        </button><br>


        <table class="table table-sm table-hover">
            <tr *ngFor="let address of addressList">
              <td>
                {{address.Firstname}} - {{address.Lastname}}
              </td>
              <td>
                {{address.Address1}},{{address.Address2}}
              </td>
              <td>
                  {{address.City}},{{address.Postcode}}
                </td>
            </tr>               
          </table>              
    </div>
  </div>

address.component.ts

export class AddressComponent implements OnInit {

  singleAddress: Address
  addressList: Address[];
  errorMessage: string ="";

  constructor(private addressService: AddressService, private http :HttpClient) { }

  ngOnInit() {

  }

  OnCustomerAddressClick(){
    this.addressService.getCustomerAddress()
    .subscribe(
      (response:Response) => {
        this.addressList = response.json();
        console.log(this.addressList);
      },
      (error) => {
        this.errorMessage = "Unable to get Customer Address";
      });
  }

}

Upvotes: 0

Views: 59

Answers (1)

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

The problem is that your response is an object. And you are assigning response to this.addressList. So this.addressList contains an object not an array.

But you want to iterate on Addresses.

So see here, I am assigning Address to this.addressList.

this.addressList = response.json().Address;

Change function OnCustomerAddressClick() in address.component.ts as shown below.

  OnCustomerAddressClick(){
    this.addressService.getCustomerAddress()
    .subscribe(
      (response:Response) => {
        this.addressList = response.json().Address;
        console.log(this.addressList);
      },
      (error) => {
        this.errorMessage = "Unable to get Customer Address";
      });
  }

Upvotes: 1

Related Questions