Ionic+Angular中如何访问JSON数组首个对象并展示数据

我来帮你搞定这两个问题——获取数组首个对象，以及让页面显示具体数据而非[object Object]，分两步操作就行：

1. 提取JSON数组的首个对象 #

你当前的TS代码是把API返回的整个响应赋值给了result，所以拿到的是全部数据。根据你期望的输出格式，目标应该是timeSeries数组第一个元素里的parameters数组的首个对象（就是包含name:"msl"的那个对象）。你可以修改getData方法里的订阅逻辑：

getData(){
  var url = `https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/16.158/lat/58.5812/data.json`;
  this.data = this.http.get(url);
  this.data.subscribe(data=>{
    // 精准提取你需要的首个对象
    this.result = data.timeSeries[0].parameters[0];
  })
}

如果你的需求只是获取timeSeries数组的第一个元素，那就改成this.result = data.timeSeries[0];，按需调整即可。

2. 让数据正常展示 #

之前页面显示[object Object]是因为直接插值对象时，浏览器会把对象转为默认字符串。这里可以用Angular的json管道来格式化JSON输出，再搭配<pre>标签保留格式，修改HTML里的展示部分：

<ion-row>
  <pre>{{ result | json }}</pre>
</ion-row>

这样就能得到和你期望类似的格式化输出了。如果你想手动指定展示的属性，也可以直接拼接：

<ion-row>
  "name":"{{result.name}}", "levelType":"{{result.levelType}}", "level":{{result.level}}, "values":[ {{result.values[0]}} ]
</ion-row>

完整修改后的代码参考 #

TS代码

import { Component } from '@angular/core';
import { NavController, AlertController, Platform } from 'ionic-angular';
import { HttpClient } from "@angular/common/http";
import { Observable } from "rxjs/Observable";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  result: any = {}; // 改成对象类型更贴合需求
  data: Observable<any>;

  constructor(
    public navCtrl: NavController, 
    public alertCtrl: AlertController, 
    private platform: Platform, 
    public http: HttpClient
  ) { }

  getData(){
    var url = `https://opendata-download-metfcst.smhi.se/api/category/pmp3g/version/2/geotype/point/lon/16.158/lat/58.5812/data.json`;
    this.data = this.http.get(url);
    this.data.subscribe(data=>{
      this.result = data.timeSeries[0].parameters[0];
    })
  }
}

HTML代码

<ion-header>
  <ion-navbar>
    <ion-title>New App</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding class="no-scroll">
  <ion-grid>
    <button ion-button (click)="getData()">Get Data</button>
    <ion-row>
      <pre>{{ result | json }}</pre>
    </ion-row>
  </ion-grid>
</ion-content>

内容的提问来源于stack exchange，提问作者Vendela