Получение [объект Object] в то время как ответ отображения HTTP в угловом 2

Question

Я получаю [объект Object], используя Observable карты в угловом 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] ответ. Где ошибка я не могу понять это

Answer 1

Вы должны изменить свой 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); 
    }); 
    } 
} 

Answer 2

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

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

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

• в вашей службы и MarketComponent вам не нужно вводить MarketViewMod el в вашем конструкторе.
• Вам необходимо объявить переменную 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-statement, так как ваши данные будут получены асинхронно:

e.г:

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

Мы должны помнить, хотя этот код прекрасно работает, мы на самом деле не отливают ответ, чтобы быть экземпляры классов. Если вы хотите это сделать, я предлагаю следующую ссылку с отличными ответами :) How do I cast a JSON object to a typescript class