Parsing API result to model in Angular5

Question

Below is my Angular Component with A POST API

import { Component, OnInit } from '@angular/core';
import { HttpClient,HttpParams, HttpHeaders} from '@angular/common/http';
import {Response} from '@angular/http';
import {Router} from "@angular/router";
import {Observable} from "rxjs/Observable";
import {ILogin} from "../interfaces/ILogin";

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
  username: string="";
  password: string="";
  loginBtnText: string='Log In';
  clearBtnText: string='Reset Fields';
  message:string;
  cssClass:string;
  LoginDetail:ILogin[]=[];
  constructor(private http:HttpClient ) { }
  ngOnInit() {
  }
  checkLogIn(){     
    if(this.username.length>0 && this.password.length>0)
    {
    var params=[{
      "ActionMethod":"CheckLogin",
      "StaffCode":this.username,
      "Password":this.password
    }]
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json'
      })
    };

    this.http.post<ILogin []>("http://localhost:57863/api/MyApp/",
    params,httpOptions
    )
    .subscribe((data:ILogin[])=> {
      //console.log(data);
      this.LoginDetail= data;
    }
    ,
    error => 
     {
       alert("Error ! Try After Some Time");
      }
    );
    console.log(this.LoginDetail);
    debugger;
  }
  else{
      this.message="Some Fields are Empty";
      this.cssClass="text-danger";
  }
  }
}

After API Call I am getting data but I am not able o use it like I used to do it in Jquery or Angular JS like below snippet

data.Result[0].Id

Since Angular 5 Work with TypeScript so I created an Interface with properties same as my result

export interface ILogin {
    Id:number;
    UserId:number;
    UserName:string;
    UserEmail:string;
    UserPassword:string;
    UserRole:string,
    CreatedDate:DateTimeFormat;
    IsActive:string;
    Otp:number;
    OtpdateStamp:DateTimeFormat;
    ImagePath:string;
    Status:string;
    Message:string;
}

But how can I use it for furthur calculation . I tried to put result in variable of Type ILogin[]

LoginDetail:ILogin[]=[];

and in API Call

.subscribe((data:ILogin[])=> {
      //console.log(data);
      //debugger;
      this.LoginDetail= data;

    }

Why cant I use

this.LoginDetail.Id
this.LoginDetail.UserId

When I print this.LoginDetail in console , its empty How to parse API result to a model

I am a Ap.Net Core Developer , Started Working on Angular 5 , In ASP.Net Core We Create a Model Class to hold data , Why we use Interface For this in Angular 5 , a normal class wont work ? if do than what's the difference in using interfaces or class here

Suren Srapyan · Accepted Answer · 2018-04-09 05:53:27Z

1

Your code is OK. Your request to the API is asynchronous so your result data is available only at the subscribe function, but you have logged it after the subscribe function. Log in the function and you will get the desired result. But you can still use that property in the template, because Angular detects the change of the variable and runs change detection.

.subscribe((data:ILogin[])=> {
   this.LoginDetail = data;
   console.log(this.LoginDetail); // is available here.
}

// is NOT available here

edited Apr 9, 2018 at 5:53

answered Apr 9, 2018 at 5:48

Suren Srapyan

68.9k14 gold badges128 silver badges119 bronze badges

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

7 Comments

Tanwer Over a year ago

I tried console.log(this.LoginDetail[0].Status); inside Subscribe and it console it says Status is Undefined .

Suren Srapyan Over a year ago

Try to log the whole LoginDetail

Tanwer Over a year ago

I put a debugger after API call and Another inside Subscribe Block , but it hit always the Debugger after API Call and after that Debugger inside Subscribe Call , Maybe that's causing the issue , it is not in synchronization

Suren Srapyan Over a year ago

Remove your debuggers and check if you got a data in the Angular ever ?

Tanwer Over a year ago

Yes It Print Whole LoginDetail as Array of Object but not LoginDetail.Result[0].Status , Status is Undefined in that case

|

Collectives™ on Stack Overflow

Parsing API result to model in Angular5

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related