0

I am trying to create my project from scratch in ASP.NET CORE with Angular (SPA template). I've created a basic API & form but unable to fetch the data while I am receiving the data in Network -> Response. Here's my code

API Controller

[HttpGet]
public IActionResult Get()
{
        var res = Json(UsersBAL.GetAll());
        return res;
}

Angular Component

import { Component, OnInit } from '@angular/core';
import { UsersService } from '../../Services/users.service';
@Component({
  selector: 'app-vehicle-form',
  templateUrl: './vehicle-form.component.html',
  styleUrls: ['./vehicle-form.component.css']
})
export class VehicleFormComponent implements OnInit {
  users: any;
  constructor(private usersService: UsersService) { }
  ngOnInit() {
this.usersService.getUsers().subscribe((data: any) => {
  this.users = data;
  console.log("Users : ",data);
 },
  error => {
    console.log(error)
  })
//console.log("Users : ",this.users);
 }
}

Angular Service

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, map, tap } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class UsersService {
  api_url = 'http://localhost:58508/api/';
  constructor(private http: HttpClient) { }
  getUsers() {
return this.http.get(this.api_url + 'Users')
.pipe(map((response: any) => response.json()))
.pipe(
  tap(_ => console.log('fetched users')),
catchError(this.handleError('getusers', []))
);
}
  private handleError<T> (operation = 'operation', result?: T) {
return (error: any): Observable<T> => {

  // TODO: send the error to remote logging infrastructure
  console.error(error); // log to console instead

  // TODO: better job of transforming error for user consumption
  console.log(`${operation} failed: ${error.message}`);

  // Let the app keep running by returning an empty result.
  return of(result as T);
};
  }
}
1
  • Remove this line .pipe(map((response: any) => response.json())) from get method. HttpClient converts it to json() by default Commented Dec 18, 2018 at 12:23

2 Answers 2

1

You don't need the map(res => res.json()) in HttpClient. It assumes JSON by default and parses it immediatelly for you.

So just return this in the service:

getUsers() {
  return this.http.get(this.api_url + 'Users')
    .pipe(
      tap(_ => console.log('fetched users')),
    catchError(this.handleError('getusers', []))
  );
Sign up to request clarification or add additional context in comments.

Comments

0

Remove this line .pipe(map((response: any) => response.json())) from get method.

HttpClient gives the json response data by default.

return this.http.get(this.api_url + 'Users')
// .pipe(map((response: any) => response.json())) -- not required
.pipe(
  tap(_ => console.log('fetched users')),
catchError(this.handleError('getusers', []))
);

8 Comments

How does your response look like? if you do tap(data => console.log(data)), after removing map
same...empty array
Do you see your response in network tab on browser console?
getusers failed: Http failure response for (unknown url): 0 Unknown Error
That's not the pure JSON object. Its an array what you are returning. JSON Object should start with {. What you could do is return your data something like {respData: ['Your actual array data']}. And then map it like .pipe(map((response: any) => response['respData']))
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.