2017-07-01 4 views
0

Ich versuche, ein Array aus der Sicht meines Angular Projekt Zugriff auf Array in JSON 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

zu zeigen:

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 correctly respuestas ist ein Array, so ist es OK

In the view Ich bekomme preguntas.texto = "Un colegio necesita enviar 5 estudiantes..." und preguntas.respuestas = 9,14,20,40.

Wenn ich versuche, preguntas.respuestas [0] Ich habe diesen Fehler "TypeError: Kann Eigenschaft '0' von undefined TypeError nicht lesen: Kann die Eigenschaft '0' von undefined bei Object.eval [als updateRenderer] nicht lesen .. . "

Was mache ich falsch?

Danke fürs Lesen! : D

EDIT:

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); 
}); 
}} 
+0

Ja, ich bin sehr verwirrt, weil 'preguntas.texto' funktioniert /Derselbe Fehler :( –

+3

http ist ** asynchron**. Zwischen dem Moment, in dem Ihre Ansicht angezeigt wird, und dem Moment, an dem Ihre HTTP-Antwort zurückkommt, entspricht Preguntas dem Wert, mit dem Sie sie initialisiert haben. Vermutlich ein leeres Objekt, sonst würde preguntas.texto auch die selbe Ausnahme verursachen. Wenn Sie den ganzen release-Code gepostet haben, wäre es viel einfacher zu helfen. Und poste es als Text, nicht als Link zu einem Bild. –

+0

Oftmals müssen Sie nur warten, bis Ihr http-Aufruf vor dem Rendern der Ansicht ausgeführt wird (was zu einem Fehler führt). Sie können das angezeigte Element einfach in ein div mit einem * * ngIf = "preguntas && preguntas.respuestas && umbrechen. preguntas.respuestas [0] "' und es wird angezeigt, sobald diese Eigenschaft existiert. – StephenRios

Antwort

0

Sie sollten so etwas versuchen:

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

und dann so etwas wie dies versuchen:

console.log(respuestas[0])