Вместо объекта json — undefined. Anguar 2 и 4, как вы обмениваетесь данными через RestAPI?

Question

[Nozim Y]

Коротко: никак не получается обмениваться json'ом между Angular и nodejs. Т.е. принять json через http в angular'e. В туториалах по ng http показана работа с backend- заглушкой, и этот код (конечно - та важная отобранная часть, а не все ) не работает с реальной API.
Вот компонент и сервис, где происходит действие:
app.component.ts

import { Component, OnInit } from '@angular/core';

import { User } from './user';
import { UsersService } from './users.service';

console.log('console.log');
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  title = 'Title';
  
  //users: User[];
  
  // getUsers(): void {
  //   this.usersService.getUsers().then(users => this.users = users);
  // }
  
  // ngOnInit(): void {
  //   this.getUsers();
  //   console.log(this.users);
  // }
  
  constructor( private usersService: UsersService  ) {}
  
  errorMessage: string;
  users: User[];
  mode = 'Observable';
  
  ngOnInit() { this.getUsers(); }
  
  getUsers() {
    this.usersService.getUsers()
                    .subscribe(
                      users => this.users = users,
                      error =>  this.errorMessage = <any>error);
  console.log("appComponent.users:  "+this.users);
  }
}

users.service.ts

import { Injectable } from '@angular/core';
import { Headers, Http, Response  } from '@angular/http';

import 'rxjs/add/operator/toPromise';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';

import { User } from './user';

@Injectable()
export class UsersService {
  private usersUrl = '***.****.io/api/users';  // URL to web api

  
  constructor(private http: Http) { }
  
  getUsers(): Observable<User[]> {
    return this.http.get(this.usersUrl)
                    .map(this.extractData)
                    .catch(this.handleError);
  }
  private extractData(res: Response) {
    let body = res.json();
    console.log("usersService body:  "+body);
    return body.data || { };
  }
  
  private handleError (error: Response | any) {
    // In a real world app, you might use a remote logging infrastructure
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
    
    // getUsers(): Promise<User[]> {
    //   return this.http.get(this.usersUrl)
    //             .toPromise()
    //             .then(response => response.json().data as User[])
    //             .catch(this.handleError);
    // }
    
    // private handleError(error: any): Promise<any> {
    //   console.error('An error occurred', error); // for demo purposes only
    //   return Promise.reject(error.message || error);
    // }
    
    
    
    //!!!
    // getUser(limit: number): Promise<User> {
    //   const url = `${this.userUrl}/${limit}`;
    //   return this.http.get(url)
    //     .toPromise()
    //     .then(response => response.json().data as User)
    //     .catch(this.handleError);
        
    // }
    
    // private headers = new Headers({'Content-Type': 'application/json'});

    // update(user: User): Promise<User> {
    //   const url = `${this.userUrl}/${user.id}`;
    //   return this.http
    //     .put(url, JSON.stringify(user), {headers: this.headers})
    //     .toPromise()
    //     .then(() => user)
    //     .catch(this.handleError);
    // }
    
    // create(name: string): Promise<User> {
    //   return this.http
    //     .post(this.userUrl, JSON.stringify({name: name}), {headers: this.headers})
    //     .toPromise()
    //     .then(res => res.json().data as User)
    //     .catch(this.handleError);
    // }
    
    // delete(id: number): Promise<void> {
    //   const url = `${this.userUrl}/${id}`;
    //   return this.http.delete(url, {headers: this.headers})
    //     .toPromise()
    //     .then(() => null)
    //     .catch(this.handleError);
    // }
}

Прошу у опытных указать правильное направление новичку в частности и в Angular'e.

Answer 1

[Алексей Зуев]

Вот этот код
console.log("usersService body: "+body);

дает вам массив в консоли. Потом вы зачем-то пишете

return body.data || { };

у массива нет свойства data, соответственно ваш сервис возвращает пустой объект.

Эту строчку вообще удалите

console.log("appComponent.users: "+this.users);
никто не получает данные из асинхронного запроса таким образом

this.usersService.getUsers()
    .subscribe(
        users => {
           console.log(users);
           this.users = users;
        },
        error =>  this.errorMessage = <any>error);

Итого

private extractData(res: Response) {
    return res.json() || [];
}