如何引用JSON服务器响应以在Ionic2 / Angular2应用中显示？

Question

我是Angular2和Ionic2混合应用程序开发的新手。 我有以下内容，作为我对Web服务器发出的http get请求的服务器响应，但是现在在displaypage.html显示它是一个问题。

console.log(response)如下所示

{server_response: Array(35)}
server_response
:
Array(35)
0
:
{id: "296", category: "Tiler", type: "Repairs Job", details: "Send a workman", other_info: "", …}
1
:
{id: "289", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
2
:
{id: "297", category: "Electrician", type: "New Job", details: "", other_info: "", …}
3
:
{id: "298", category: "Electrician", type: "New Job", details: "", other_info: "", …}
4
:
{id: "299", category: "Electrician", type: "New Job", details: "", other_info: "", …}
5
:
{id: "300", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
6
:
{id: "301", category: "Electrician", type: "Repairs Job", details: "Switches", other_info: "", …}
7
:
{id: "302", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
8
:
{id: "303", category: "Carpenter", type: "New Job", details: "", other_info: "", …}
9
:
{id: "295", category: "Electrician", type: "New Job", details: "", other_info: "", …}
10
:
{id: "294", category: "Electrician", type: "Repairs Job", details: "Gear switch / cut out", other_info: "", …}
11
:
{id: "293", category: "Painter", type: "New Building", details: "", other_info: "", …}
12
:
{id: "292", category: "Electrician", type: "New Job", details: "", other_info: "", …}
13
:
{id: "291", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
14
:
{id: "290", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
15
:
{id: "263", category: "Electrician", type: "Repairs Job", details: "Switches", other_info: "", …}
16
:
{id: "262", category: "Plumber", type: "New Job", details: "", other_info: "", …}
17
:
{id: "261", category: "Plumber", type: "New Job", details: "", other_info: "", …}
18
:
{id: "260", category: "Plumber", type: "New Job", details: "", other_info: "", …}
19
:
{id: "259", category: "Plumber", type: "New Job", details: "", other_info: "", …}
20
:
{id: "257", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
21
:
{id: "258", category: "Painter", type: "New Building", details: "", other_info: "", …}
22
:
{id: "256", category: "Plumber", type: "Repairs Job", details: "Send a workman", other_info: "", …}
23
:
{id: "255", category: "Electrician", type: "Repairs Job", details: "Distribution board", other_info: "", …}
24
:
{id: "254", category: "Electrician", type: "Repairs Job", details: "Send a workman", other_info: "", …}
25
:
{id: "253", category: "Electrician", type: "New Job", details: "", other_info: "", …}
26
:
{id: "252", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
27
:
{id: "251", category: "Painter", type: "New Building", details: "", other_info: "", …}
28
:
{id: "250", category: "Carpenter", type: "Repairs Job", details: "Kitchen Carbinet", other_info: "", …}
29
:
{id: "249", category: "Carpenter", type: "Repairs Job", details: "Kitchen Carbinet", other_info: "", …}
30
:
{id: "248", category: "Carpenter", type: "Repairs Job", details: "Door / Lock", other_info: "", …}
31
:
{id: "247", category: "Painter", type: "New Building", details: "", other_info: "", …}
32
:
{id: "246", category: "Electrician", type: "New Job", details: "", other_info: "", …}
33
:
{id: "245", category: "BrickLayer", type: "New Job", details: "", other_info: "", …}
34
:
{id: "244", category: "Carpenter", type: "Repairs Job", details: "Wardrobe", other_info: "", …}
length
:
35
__proto__
:
Array(0)
__proto__
:
Object

displaypage.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import {DisplayService} from '../../app/services/display.service';


@Component({
  selector: 'display',
  templateUrl: 'display.html'
})
export class DisplayPage {
  items: any;
  category: any;
  limit:any;
  constructor(public navCtrl: NavController, public displayService:DisplayService) {
    this.getDefaults();
  }

  ngOnInit(){
    this.getPosts(this.category, this.limit);
  }

  getDefaults(){
    if(localStorage.getItem('category') != null){
      this.category = localStorage.getItem('category');
    } else {
      this.category = 'sports';
    }

  }

  getPosts(category, limit){
    this.redditService.getPosts(category, limit).subscribe(response => {
    this.items = response.children;
      console.log(response);
    });
  }


}

displaypage.html

<ion-header>
  <ion-navbar color="primary">
    <ion-title>
      IonReddit
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    <ion-list>

    </ion-list>
    <ion-list>
      <ion-item *ngFor="let item of items">

        <h2>{{item.data.category}}</h2>


      </ion-item>
    </ion-list>
</ion-content>

上面的HTML中什么都没有显示，但是我在控制台日志中得到了上面的响应。

Answer 1

this.items = response.children;

children来自哪里？ 您可以console.log（response.children）吗？

Answer 2

谢谢大家，我终于解决了这个问题

在displayPage.ts的get HttpRequest中，我使用了以下代码

  getPosts(category, limit){
    this.redditService.getPosts(category, limit).subscribe(response => {
    this.items = response.server_response;
    //  console.log(response);
    });

代替

  getPosts(category, limit){
    this.redditService.getPosts(category, limit).subscribe(response => {
    this.items = response.children;
      console.log(response);
    });
  }

并且在myDisplay.html中，我像这样显示JSON响应中的所需项目

<ion-content padding>
    <ion-list>

    </ion-list>
    <ion-list>
      <ion-item *ngFor="let item of items">

        <h2>{{item.id}}</h2>,  <h2>{{item.request_from}}</h2>


      </ion-item>
    </ion-list>
</ion-content>