I am attempting to display an array in the view of my Angular project
Items.json
{
"tipo": "texto",
"texto": "A school needs to send 5 students as representatives to a forum on environmental pollution. It was decided that 2 students should be from tenth grade and 3 from eleventh grade. There are 5 prepared students in tenth grade and 4 in eleventh grade. How many different groups can be formed to send to the forum?",
"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);
});
The console.log() displays the JSON correctly respuestas is an Array, so it is OK
In the view I receive
preguntas.texto = "A school needs to send 5 students..."
and preguntas.respuestas = 9,14,20,40
.
When I try to access preguntas.respuestas[0] I encounter this error "TypeError: Cannot read property '0' of undefined TypeError: Cannot read property '0' of undefined at Object.eval [as updateRenderer] ... "
What could be causing this issue?
Thank you for taking the time to read! :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);
});
}}