I am not able to bind the API JSON response to angular typescript class

user_14820992 0
Viewed 425

I am new to angular, trying to call web API from angular. I am facing a very different problem that the response is getting empty array. Here, I have added my service.ts code:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { GroupResult } from '@progress/kendo-data-query';
import { throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';


class TodoListModel{
  id?:number | null;
  itemName!:String;
  dueDate!:Date;
}

@Injectable({
  providedIn: 'root'
})
export class TodoService {


  public initDueTime: Date = new Date(2021, 12, 31, 23, 59, 59);
  public hourlyTodos: ToDo[] | GroupResult[] =[];
  
  todos:ToDo[] = []

  constructor(private http: HttpClient) { }
  
  readonly rootUrl=`https://localhost:44353/api`;
  private todoListModel: TodoListModel[] | JSON=[];
  
  refreshList(){
     //this.http.get(this.rootUrl+"/todos").toPromise().then(res=>this.todoListModel=res as TodoListModel[]);
     this.http.get<TodoListModel[]>(this.rootUrl+`/todos`).pipe(
       map((data: TodoListModel[])=>{
         return data;
       }),
       catchError(error=>{
         return throwError(`Something's wrong`);
       })
     )
     console.log(this.todoListModel);
  }
}

export interface ToDo{
  item:string;
  due:Date;
  hour:number;
}

There's one error that is related to animations, that should not bother.

And my console looks like this: empty array:

enter image description here

webapi angular-httpclient angular multidimensional-array
2 Answers

You don't ask a specific question, but based on your tittle, you just should need this (map is not needed):

refreshList(){
   this.http.get<TodoListModel[]>(this.rootUrl+`/todos`)
   .pipe(
       catchError(error=>{
         return throwError(`Something's wrong`);
       })
     )
   .subscribe( (res:TodoListModel[]) => {
                         this.todoListModel = res;
                         console.log(this.todoListModel);
   });
    
  }

I rather deal errors in this way, but it's not needed:

refreshList(){
   this.http.get<TodoListModel[]>(this.rootUrl+`/todos`)
   .subscribe( 
      (res:TodoListModel[]) => {
         this.todoListModel = res;
         console.log(this.todoListModel);
      },
      (error) => throwError(`Something's wrong`);
    );
}
user_154686630

To fix this issue you need to alter your pipe/map by assigning the data(data: TodoListModel[]) to this.todoListModel as below:

this.http.get<TodoListModel[]>(this.rootUrl+`/todos`).pipe(
  map((data: TodoListModel[])=>{
    this.todoListModel = data;
  }), catchError(error=>{
    return throwError(`Something's wrong`);
  }) 
)

I have modified the code which you have mentioned:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { GroupResult } from '@progress/kendo-data-query';
import { throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';


class TodoListModel{
  id?:number | null;
  itemName!:String;
  dueDate!:Date;
}

@Injectable({
  providedIn: 'root'
})
export class TodoService {


  public initDueTime: Date = new Date(2021, 12, 31, 23, 59, 59);
  public hourlyTodos: ToDo[] | GroupResult[] =[];
  
  todos:ToDo[] = []

  constructor(private http: HttpClient) { }
  
  readonly rootUrl=`https://localhost:44353/api`;
  private todoListModel: TodoListModel[] | JSON=[];
  
  refreshList(){
     this.http.get<TodoListModel[]>(this.rootUrl+`/todos`).pipe(
       map((data: TodoListModel[])=>{
         this.todoListModel = data;
       }),
       catchError(error=>{
         return throwError(`Something's wrong`);
       })
     )
     console.log(this.todoListModel);
  }
}

export interface ToDo{
  item:string;
  due:Date;
  hour:number;
}
user_87577800
Related