CODEWITHSUNDEEP
angularionic-framework
Shailesh Bhat
Shailesh Bhat

Reputation: 152

In Angular2/4/5, How to bind the Data to FrontView If it is coming like an array

I need to get data in front of UserName and Email of home.html. But Now I'm getting like belowenter image description here I'm getting data in console as the below image enter image description here What may be the error/ How to bind these type of data in HTML with Angular.. Now home.html is below..Commented/non commented code, both are not working

 <div class="row" *ngIf="userClaims">
  <div class="col s12 m7">
    <div class="card">
      <div class="card-content">
        <span>Username :{{userClaims.Name}}</span>
        <br>
        <span>Email : {{userClaims}}</span>
        <br>
        <!-- <div *ngFor="let order of userClaims" style="border: 1px solid lightgrey; padding: 15px; margin: 5px 0;">
          OrderNumber : {{ order.Id }} <br>
          P_O_Number : {{ order.Address }} <br>
        </div> -->
      </div>
    </div>
  </div>
</div>

home.ts 

ngOnInit() {
    this.resetForm();
    this.userClaims= this.userService.userClaims;
  }

Below is the service code app-data.service.ts

sendMobileNo(mobno) {
        var data = "MobileNo=" + mobno;
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
       var url=this.uihelper.CallWebAPIUrlNew("/Tenant/GetTenantsByMobile")+"?"+data;
        return this.http.get(url).map((response: Response) => {
           var data = response.json();
             //this.userClaims = response.json();
             //this.userClaims(data);
           this.userClaims=data;
        });
}

I need to know , if the data is coming as array like in above image, how to present it in HTML page..Can anyone help me out..Thanks In Advance

My register component from which I'm calling app-data.service and navigating to home component is register.ts

    OnSubmit(mobno){
    this.regService.sendMobileNo(mobno).subscribe((data : any)=>{
      //this.userClaims = data;
      this.navCtrl.push(HomePage,{data});
      //this.navCtrl.push(HomePage);
    },
   (err : HttpErrorResponse)=>{
     this.isLoginError = true;
   });
  }

Upvotes: 0

Views: 76

Answers (2)

Vikas
Vikas

Reputation: 12036

An Observable is cold, meaning that you have to subscribe on it to get it called and have a value. map operator is used to parse your response in the desired format and it returns an observable which shall be subscribed.

sendMobileNo(mobno) {
        var data = "MobileNo=" + mobno;
        var reqHeader = new HttpHeaders({ 'Content-Type': 'application/json'});
       var url=this.uihelper.CallWebAPIUrlNew("/Tenant/GetTenantsByMobile")+"?"+data;
        return this.http.get(url).map((response: Response) =>response.json());


}

I assume you have injected your service in home.ts invoke the method and subscribe it to get the value.

onSubmit(mobno:any){
    this.userService.sendMobileNo(mobno).subscribe(response=>{
       this.userClaims= response});
}

Upvotes: 0

Fussel
Fussel

Reputation: 1865

If you have only one value (and you know that it will be always just that one), you could use

var data = response.json();
if(data && data.length == 1) {
    this.userClaim = data[0];
}

But in this case I would acutally recomment you to modify your back-end to just return one object instead of an array.

If you have an unknown amount of data in your array use a loop

<div class="row" *ngIf="userClaims">
    <div *ngFor="let order of userClaims" class="col s12 m7">
        <div class="card">
            <div class="card-content">
                <span>Username :{{order.Name}}</span>
                <br>
                <span>Email : {{order.Email}}</span>
            </div>
        </div>
    </div>
</div>

Just wrote this snippets here, so I can't guarantee that it's completely accurate.

Upvotes: 0

Related Questions