需要帮助解析 JSON 响应 Angular 4答案

【问题标题】：Need help parsing JSON response Angular 4需要帮助解析 JSON 响应 Angular 4
【发布时间】：2017-06-24 05:37:15
【问题描述】：

我正在研究 Angular 4 和 PHP、Mysql。我的服务器回复是

[{"transportation_pf":"1"},[{"destination":"Swarget"}],
{"transportation_pf":"5"},[{"destination":"Swarget"},
{"destination":"Dombivli"}]]

总线服务和组件是

import { Injectable } from '@angular/core';
import {Bus } from './bus';
import {Headers,Http } from '@angular/http';
import {Observable} from'rxjs/Observable';
import 'rxjs/add/operator/toPromise';

@Injectable()
export class BusService {
private busUrl='http://localhost/MycityDB/bus.php';
constructor(private http:Http) { }

getPlatforms(){

return this.http.get(this.busUrl).map(
(res)=>res.json()   
);

}

private handleError(error: any): Promise<any> {
console.error('An error occurred', error);
return Promise.reject(error.message || error);
}

}

总线组件是

import { Component, OnInit } from '@angular/core';
import { Bus } from './bus';
import {BusService } from './bus.service';
import { Http } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/forkJoin';
import 'rxjs/add/operator/map';


@Component({
selector: 'app-bus',
templateUrl: './bus.component.html',
styleUrls: ['./bus.component.css']
})
export class BusComponent implements OnInit {

busData: Bus[];
loadedCharacter: {};
private busUrl='http://localhost/MycityDB/bus.php';
constructor(private http: Http,private busservice: BusService) { }

ngOnInit() {
this.busservice.getPlatforms().subscribe(
(data)=>this.busData=data    
);

}

}

总线组件html是

<p *ngFor="let bus of busData">
Bus works ! {{bus.destination}}
</p>

公交车类如下

export class Bus {
transportation_pf : string;
destination: string[];
}

HTML 输出只显示我不知道代码出错的地方。

# Bus works ! #
# Bus works ! #
# Bus works ! #
# Bus works ! #

谁能帮忙？我很困惑。

【问题讨论】：

标签： json angular http service

【解决方案1】：

尝试添加 *ngIf="busData"

<div *ngIf="busData">
  <p *ngFor="let bus of busData">
   Bus works ! {{bus.destination}}
  </p>
 </div>

或异步管道

<p *ngFor="let bus of busData | async">

这是 Observable。

您必须添加服务

import 'rxjs/add/operator/map';

【讨论】：

不工作。如果我将字段“bus.destination”更改为“bus.transportation_pf”，那么它会显示数据。但在“bus.destination”的情况下，它仍然是空白的。

【解决方案2】：

我可以注意到您得到的响应是数组和对象的组合。在您的模板中，ngfor 只会在 busData 包含 bus 对象的数组而不是数组和对象的组合时进行迭代。因此，将响应提取到 busData 对象的数组中。然后使用ngfor 进行迭代。

【讨论】：

你是对的。响应是对象和数组的组合。你能告诉我如何从 JSON 响应中检索对象和数组吗？
如果我将字段“bus.destination”更改为“bus.transportation_pf”，那么它会显示数据。但在“bus.destination”的情况下，它仍然是空白的。

【解决方案3】：

我在 Bus 组件文件中进行了以下更改

generateArray(obj){
return Object.keys(obj).map((key)=>{ return obj[key]});
}

在此之后，我还对 HTML 文件进行了更改

<div *ngFor="let mem of busData"> 
Platform Number    {{mem.transportation_source}}<br/>Destinations : 
<span *ngFor="let v of generateArray(mem.destination)">  {{v}} </span>
</div>

在生成 JSON 响应时略有修正我生成的格式如下

[
{"transportation_source":"5","destination":["Swarget","Dombivli"]},
{"transportation_source":"5","destination":["Swarget","Dombivli"]}
]

【讨论】：