Return json from web api controller with Angular

Question

I am using ASP.NET Core for my backend and Angular for my frontend. I have an API that gives me my data as JSON from the backend.

I created a service to load the api-data, but it's just returning 'undefined'.

employee.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Http } from '@angular/http';

import { Observable } from 'rxjs/Rx';
import { of } from 'rxjs/observable/of';
import { catchError, map, tap } from 'rxjs/operators';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

import { Employee } from './employee';

//interface Employee_interface {
//    id: number;
//    name: string;
//}

@Injectable()
export class EmployeeService {

    constructor(public http: HttpClient, private _httpService: Http) {}

    //apiEmployees: JSON;
    employees: Employee[];
    stuff: Object;

    getEmployees(): Observable<Employee[]> {

        this.http.get('/api/employees').subscribe(data => { console.log(data); }); //I can see an array with my json-data from the api
        this.http.get('/api/employees').subscribe(data => this.stuff = data);
        console.log("LOG: " + this.stuff); //LOG: undefined
        console.log("LOG1 :" + this.http.get('/api/employees').pipe()); //LOG1 :[object Object]

        return this.http.get('/api/employees').pipe();
    }
}

What do I have to return?

app.components.ts

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { HttpClient } from '@angular/common/http';

import { Employee } from './employee';
import { EmployeeService } from './employee.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit{
    title = 'app';
    employees: Employee[];

    constructor(public http: HttpClient, private _httpService: Http, private employeeService: EmployeeService) { }

    ngOnInit() {
        this.getEmployees();
    }

    getEmployees(): void {
        this.employeeService.getEmployees()
            .subscribe(employees => this.employees = employees);
    }
}

Where exactly are you getting `undefined` in your component? Your console logs in service are behaving correctly. — AT82, Nov 18 '17 at 09:16

score 0 · Answer 1 · answered Nov 16 '17 at 09:03

0

Change this:

return this.http.get('/api/employees').pipe();

Into this:

return this.http.get('/api/employees')
    .map(response => response.json())
    .catch((error: any) => Observable.throw(
        { message: error.json().message, details: error.json().details }));

Here we handle the error (first thing to understand what goes wrong, if it goes wrong) and we are mapping the response parsing it into JSON.

Hope it was helpful.

answered Nov 16 '17 at 09:03

SrAxi

19,787
11
46
65

Thanks for your answer. But if I use your code I get an compiler-error of the map-funtion: Property 'map' does not exist on type 'Observable – dafna Nov 16 '17 at 09:19
Did you import the map helper? `import 'rxjs/add/operator/map';` – SrAxi Nov 16 '17 at 09:25
I did! And Typescript is at the current version. – dafna Nov 16 '17 at 09:29
If you change the Observable type it will work: `Observable` – SrAxi Nov 16 '17 at 09:35
No, sadly not. And if I execute 'ng build' I get this error instead: "Property 'json' does not exist on type 'Object'". Maybe thats interesting for you. – dafna Nov 16 '17 at 09:39
If so, try removing the `.json()` from the repsonse, and just return the `response` object. See if that works out. – SrAxi Nov 16 '17 at 09:41
That makes also no difference. – dafna Nov 16 '17 at 09:56
Hmmm.. I'm sorry about that. Have tried adding `.json()` to your original code? Like this: `return this.http.get('/api/employees').pipe().json()`. – SrAxi Nov 16 '17 at 10:54
Then I get this error: Property 'json' does not exist on type 'Observablee – dafna Nov 16 '17 at 12:39
Change again to `Observable` with this new approach – SrAxi Nov 16 '17 at 12:46

Return json from web api controller with Angular

1 Answers1