[英]Getting [object Object] while mapping http response in Angular 2
I am getting an [object Object] while using Observable map in angular 2.我在 angular 2 中使用 Observable 地图时得到一个 [object Object]。
Here is the response object from the API service.这是来自 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
}
Here is the model I have created to map with the response.这是我创建的用于映射响应的模型。
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;
}
Service class to call the http and map the response.调用 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 || { };
}
Here is the Component.ts which is calling Service.ts这是调用 Service.ts 的 Component.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);});
}
}
When I see to the console I am getting [object Object] response.当我看到控制台时,我收到了[object Object]响应。 Where is the mistake I am not able to figure it out
我无法弄清楚的错误在哪里
You have a problem with your extractData
, you want the response as it is, to match your MarketViewModel
, so you need to remove the data
from that method and also to return an empty object if there is no response:您的
extractData
有问题,您希望响应原样与您的MarketViewModel
匹配,因此您需要从该方法中删除data
,如果没有响应,还需要返回一个空对象:
private extractData(res: Response) {
let body = res.json();
return body || {};
}
Some pointers:一些提示:
marketModel
in your component, to be able to use this.marketModel
.marketModel
才能使用this.marketModel
。ngOnInit
, but not implemented it in your componentngOnInit
,但没有在你的组件中实现它When testing your app it worked:在测试您的应用程序时,它有效:
getMarketListCall(): Observable<MarketViewModel>{
return this.http.get('theUrl')
.map(res => res.json()) // or use the 'extractData'
// .catch(this.handleError);
}
Your component:您的组件:
marketmodel: MarketViewModel
ngOnInit() {
this.DashBoarservice.GetMarketListCall()
.subscribe(data => {
this.marketModel = data;
},
err => { console.log(err);
});
}
Your view, you should wrap your html in an if-statement, since your data gets retrieved asynchronously:您的观点,您应该将 html 包装在 if 语句中,因为您的数据是异步检索的:
eg:例如:
<div *ngIf="marketModel"> <!-- Here! -->
<h2>MarketModel Message: {{marketModel.message}}</h2>
<div *ngFor="let data of marketModel.data">Id: {{data.marketId}} </div>
</div><br>
We need to remember though this code works wonderfully, we have not actually casted the response to be of instances of your classes.我们需要记住,虽然这段代码工作得很好,但我们实际上并没有将响应转换为您的类的实例。 If you wish to do that, I suggest the following link with some great answers :) How do I cast a JSON object to a typescript class
如果您想这样做,我建议使用以下链接并提供一些很好的答案:) 如何将 JSON 对象转换为打字稿类
You have to change your DashBoardService
as below as you are have to return MarketListObject
array as observable not MarketViewModel
:你必须改变你的
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 || [];
}
}
Also there is no need to pass MarketViewModel
as providers inside MarketComponent
so remove MarketViewModel
from MarketComponent
providers list and change your component as below .此外,无需将
MarketViewModel
作为MarketViewModel
中的提供者MarketComponent
因此从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);
});
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.