Получение [object Object] при отображении ответа http в Angular 2

Я получаю [object Object] при использовании карты Observable в angular 2.

Вот объект ответа от службы API.

{
  "isSuccess": true,
  "message": "Connection Successfull",
  "data": [
    {
      "marketId": 1,
      "city": "san",
      "cityF": "san",
      "name": null,
      "nameF": "hello",
      "sortOrder": 1,
      "isActive": true
    },
    {
      "marketId": 2,
      "city": "san",
      "cityF": "san",
      "name": null,
      "nameF": "hello",
      "sortOrder": 1,
      "isActive": true
    },
    {
      "marketId": 3,
      "city": "san",
      "cityF": "san",
      "name": null,
      "nameF": "hello",
      "sortOrder": 1,
      "isActive": true
    },
    {
      "marketId": 4,
      "city": "san",
      "cityF": "san",
      "name": null,
      "nameF": "hello",
      "sortOrder": 1,
      "isActive": true
    }
  ],
  "exceptionErrorMessage": null,
  "errorCode": 0,
  "successMessage": null
}

Вот модель, которую я создал для сопоставления с ответом.

export class MarketViewModel 
{
public isSuccess: boolean;
public message : string;
public successMessage : string;
public exceptionErrorMessage : string;
public errorCode: number;
public data: MarketListObject[];

}
export class MarketListObject 
{
    public marketId : number;
    public city: string;
    public cityF : string;
    public name : string;
    public nameF : string;
    public sortOrder : number;
    public isActive : boolean; 
}

Класс обслуживания для вызова http и сопоставления ответа.

import { Headers, RequestOptions } from '@angular/http';
import { Router, ActivatedRoute, Params } from '@angular/router';
import { MarketViewModel} from "../ViewModel/Market.ViewModel";
import { Injectable }     from '@angular/core';
import { Http, Response } from '@angular/http';
import {Observable} from 'rxjs/Rx';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

@Injectable()
export class DashBoardService {
    private MarketUrl = "DashBoard/GetMarketList";
    private ResponseData: any;
    constructor(private http: Http, private router: Router, private  marketModel : MarketViewModel) {}

    public GetMarketListCall() :Observable<MarketViewModel> {
         return this.http.get(this.MarketUrl).map(this.extractData)
                    .catch(this.handleError);
    } 
private extractData(res: Response) {
    let body = res.json();
        console.log("Body Data = "+body.data);
    return body.data || { };
  }

Вот Component.ts, который вызывает Service.ts

import { Component } from '@angular/core';
import { MarketViewModel} from "../ViewModel/Market.ViewModel";
import { DashBoardService} from "../Service/DashBoard.Service";
import { Observable } from 'rxjs/Observable';

 @Component({
     selector: 'Market-app',
    templateUrl: 'DashBoard/MarketListView',
    providers: [DashBoardService, MarketViewModel]
 })

export class MarketComponent {
  constructor(private DashBoardservice: DashBoardService, private  marketModel : MarketViewModel) {
   }

ngOnInit() {
        this.DashBoardservice.GetMarketListCall().subscribe(
                               data => {this.marketModel = data;
                                    console.log("this"+this.marketModel); }, 
                                err => {console.log(err);});
}
}

Когда я смотрю на консоль, я получаю ответ [object Object]. Где ошибка не могу понять


person San Jaisy    schedule 13.01.2017    source источник
comment
Вы добавляете объекты в строку здесь - console.log("Body Data = "+body.data); ... Попробуйте вместо этого - console.log("Body Data = ", body.data); . И то же самое в "this"+this.marketModel)   -  person P. Moloney    schedule 13.01.2017


Ответы (2)


Вы должны изменить свой DashBoardService, как показано ниже, так как вы должны вернуть массив MarketListObject как наблюдаемый, а не MarketViewModel:

@Injectable()
export class DashBoardService {
  private MarketUrl = "DashBoard/GetMarketList";
  private ResponseData: any;

  constructor(private http: Http, private router: Router, private  marketModel : MarketViewModel) {}

  public GetMarketListCall() :Observable<MarketListObject[]> {
     return this.http.get(this.MarketUrl).map(this.extractData)
                .catch(this.handleError);
  } 

  private extractData(res: Response) {
    let body = res.json();
    console.log("Body Data = "+body.data);
    return body.data || [];
  }
}

Также нет необходимости передавать MarketViewModel в качестве провайдеров внутри MarketComponent, поэтому удалите MarketViewModel из списка MarketComponent провайдеров и измените свой компонент, как показано ниже.

import { Component } from '@angular/core';
import { DashBoardService} from "../Service/DashBoard.Service";
import { Observable } from 'rxjs/Observable';

@Component({
  selector: 'Market-app',
  templateUrl: 'DashBoard/MarketListView',
  providers: [DashBoardService]
})
export class MarketComponent {

  public marketList: any[];

  constructor(private dashBoardservice: DashBoardService) {
  }

  ngOnInit() {
    this.dashBoardservice.GetMarketListCall().subscribe((data) => { 
      this.marketList = data;
      console.log("this" + this.marketList);
    },(err) => {
      console.log(err);
    });
  }
}
person ranakrunal9    schedule 13.01.2017
comment
У меня это не сработало. Я получаю [объект Объект], [объект Объект], [объект Объект], [объект Объект] - person San Jaisy; 13.01.2017
comment
Внутри функции extractData или внутри функции ngOnInit функции MarketComponent? также проверьте, удалив :Observable<MarketListObject[]> из возвращаемого типа функций GetMarketListCall. - person ranakrunal9; 13.01.2017
comment
Если я использую подписку в сервисе, то все работает нормально. Когда я использовал карту, я получаю объект. Да, я проверяю в ngOnInit. Я все еще получаю объект - person San Jaisy; 13.01.2017
comment
я обновил компонент в своем ответе. внутри переменной компонента marketList должен быть массив MarketListObject, например public marketList: MarketListObject[], поэтому импортируйте его и измените, если требуется, иначе any[] также будет работать. - person ranakrunal9; 13.01.2017
comment
Не могли бы вы сообщить мне, как сопоставить класс с ответом класса веб-API. Мне не нужен прямой массив. Я хочу сопоставить с объектом - person San Jaisy; 13.01.2017
comment
Попробуйте проверить public GetMarketListCall() { return this.http.get(this.MarketUrl).map((res) => res.json()).catch(this.handleError); } в сервисе и console.log(data) внутри кода подписки GetMarketListCall вызова API внутри вашего компонента - person ranakrunal9; 13.01.2017

У вас проблема с вашим extractData, вы хотите, чтобы ответ как есть, соответствовал вашему MarketViewModel, поэтому вам нужно удалить data из этого метода, а также вернуть пустой объект, если ответа нет:

private extractData(res: Response) {
  let body = res.json();
  return body || {};
}

Некоторые указатели:

  • В вашем сервисе и MarketComponent вам не нужно вводить MarketViewModel в свой конструктор.
  • Вам нужно объявить переменную marketModel в вашем компоненте, чтобы иметь возможность использовать this.marketModel.
  • В компоненте вы объявили метод ngOnInit, но не реализовали его в своем компоненте

При тестировании вашего приложения это сработало:

getMarketListCall(): Observable<MarketViewModel>{
    return this.http.get('theUrl')
        .map(res => res.json()) // or use the 'extractData'
        // .catch(this.handleError);
}

Ваш компонент:

marketmodel: MarketViewModel

ngOnInit() {
    this.DashBoarservice.GetMarketListCall()
       .subscribe(data => {
          this.marketModel = data;
        },
        err => { console.log(err); 
    });
}

По вашему мнению, вы должны обернуть свой html в оператор if, поскольку ваши данные извлекаются асинхронно:

e.g:

<div *ngIf="marketModel"> <!-- Here! -->
  <h2>MarketModel Message: {{marketModel.message}}</h2>
  <div *ngFor="let data of marketModel.data">Id: {{data.marketId}} </div>
</div><br>

Мы должны помнить, хотя этот код прекрасно работает, мы на самом деле не приводили ответ к экземплярам ваших классов. Если вы хотите это сделать, я предлагаю следующую ссылку с некоторыми отличными ответами:) Как привести объект JSON к классу машинописного текста

person AJT82    schedule 13.01.2017
comment
Я получаю сообщение об ошибке ... Не удается разрешить все параметры для MarketViewModel: (?, ?, ?, ?, ?, ?). - person San Jaisy; 14.01.2017
comment
Хм, странно, у меня сработало отлично. В какой момент вы получаете ошибку? - person AJT82; 14.01.2017
comment
Рабочий плунжер здесь: plnkr.co/edit/H73JV0kncx0tV0NIFMPx?p=preview - person AJT82; 14.01.2017
comment
Не используйте классы для определения этих типов. использовать интерфейсы. - person Aluan Haddad; 14.01.2017