如何访问 JSON ANGULAR 中的数组？答案

【问题标题】：How to access to array in JSON ANGULAR?如何访问 JSON ANGULAR 中的数组？
【发布时间】：2017-12-05 08:28:56
【问题描述】：

我正在尝试在我的 Angular 项目视图中显示一个数组

Items.json

{
  "tipo": "texto",
  "texto": "Un colegio necesita enviar 5 estudiantes como representantes a un foro sobre la contaminación del medio ambiente. Se decidió que 2 estudiantes sean de grado décimo y 3 de grado undécimo. En décimo hay 5 estudiantes preparados para el foro y en undécimo hay 4. ¿Cuántos grupos diferentes pueden formarse para enviar al foro?",
  "respuestas": [
    "9",
    "14",
    "20",
    "40"
  ]
}

TS：

let timeoutMS = 10000;
this.http.get(assets / Items.json)
    .timeout(timeoutMS)
    .map(res => res.json()).subscribe(data => {
        let responseData = data;

        this.preguntas = responseData;
        console.log(this.preguntas);

    },
    err => {
        console.log(err);
    });

console.log() displays the JSON correctlyrespuestas 是一个数组，所以可以

In the view 我得到preguntas.texto = "Un colegio necesita enviar 5 estudiantes..." 和preguntas.respuestas = 9,14,20,40。

如果我尝试获取 preguntas.respuestas[0] 我有这个错误“TypeError: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined at Object.eval [as updateRenderer] ... "

我做错了什么？

感谢阅读！ :D

编辑：

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LoginPage } from '../login/login';

import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/timeout';

@Component({
  selector: 'page-pregunta',
  templateUrl: 'pregunta.html'
})
export class PreguntaPage {
    userData = null;
    preguntas = {};
constructor(private facebook:Facebook ,  public http: Http) {
  }

ionViewDidLoad() {
    let path = 'assets/Items.json';
    let encodedPath = encodeURI(path);
    let timeoutMS = 10000;

    this.http.get(encodedPath)
    .timeout(timeoutMS)
    .map(res => res.json()).subscribe(data => {
let responseData = data;

this.preguntas = responseData;
    console.log(this.preguntas);
},
err => {
  console.log('error!!', err);
});
}}

【问题讨论】：

是的，我很困惑，因为preguntas.texto 正在工作/同样的错误:(
http 是异步。因此，在您的视图显示的那一刻和您的 http 响应返回的那一刻之间，preguntas 等于您初始化它的值。大概是一个空对象，否则 preguntas.texto 也会导致同样的异常。如果您发布所有相关代码，它会更容易提供帮助。并将其作为文本发布，而不是作为图片链接。
通常，如果您只需要等到您的 http 调用在视图呈现之前进行（导致错误），您可以将显示的元素包装在一个带有 *ngIf="preguntas && preguntas.respuestas && preguntas.respuestas[0]" 的 div 中，然后一旦该属性存在，它将显示出来。
我想在 Angular 中使用安全运算符 i:e elvis 运算符可能会像 preguntas 一样有所帮助？.respuestas[0] 你可以试试这个吗？
preguntas.texto 正在工作，而 preguntas.respuestas 也没有 preguntas.respuestas[n]

标签： arrays json angular typescript ionic-framework

【解决方案1】：

你应该尝试这样的事情：

let respuestas = []
...
responseData.respuestas.map(item => respuestas.push(item)).

然后尝试这样的事情：

console.log(respuestas[0])

【讨论】：