Trouble with pulling information from data provider/JSON (ionic framework)

Question

I'm still new to angular and ionic, and I'm trying to make a pokedex app. I created a json file with an array of "pocket monsters". As of right now, I'm trying to just pull the information out of the json file and display it, but I'm unsuccessful. When I run the application, it just shows a list with numbers. I'm not sure what I'm doing wrong. Can anyone help out? I'll add the data provider, json file, and the home component and template for reference.

 <ion-header> <ion-navbar> <ion-title> Pokedex </ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item *ngFor="let pocketMonster of pocketMonsters; let i = index;"> <ion-label>{{i+1}}</ion-label> </ion-item> </ion-list> <!--<div *ngIf="pocketMonsters.length"></div> --> </ion-content> 

 import { Component } from '@angular/core'; import { ModalController, NavController } from 'ionic-angular'; import { pokemonDataService } from '../../providers/data/data'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { pocketMonsters = []; searchQuery: string = ''; constructor(public navCtrl: NavController, public dataService: pokemonDataService) { } ionViewDidLoad() { this.dataService.getAllPokemon().then((data) => { data.map((pocketMonster) => { return pocketMonster; }); this.pocketMonsters = data; }); } //ngOnInit(){ //this.dataService.getAllPokemon() //.subscribe(data => { //this.pokemonList = data; //}); //} } 

 import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import 'rxjs/add/operator/map'; @Injectable() export class pokemonDataService { data: any; constructor(public http: Http) { } getAllPokemon() { if(this.data){ return Promise.resolve(this.data); } return new Promise(resolve => { this.http.get('assets/data/pokemon.json').map(res => res.json()).subscribe(data => { this.data = data.pocketMonsters; resolve(this.data); }); }); } } 

 { "pocketMonsters": [ { "pokemonName" : "Bulbasaur", "pokedexNumber" : "001", "description": "Bulbasaur can be seen napping in bright sunlight. There is a seed on its back. By soaking up the sun's rays, the seed grows progressively larger", "pokemonImage" : "<img src='assets/imgs/bulbasaur.png" }, { "pokemonName" : "Ivysaur", "pokedexNumber" : "002", "description" : "", "pokemonImage" : "<img src='assets/imgs/ivysaur.png" } } } 

Answer 1

you are returning function so it does not work

import { Component } from '@angular/core';
import { ModalController, NavController } from 'ionic-angular';

import { pokemonDataService } from '../../providers/data/data';

@Component({
    selector: 'page-home',
    templateUrl: 'home.html'
})

export class HomePage {
  pocketMonsters = [];
  searchQuery: string = '';

  constructor(public navCtrl: NavController, public dataService:pokemonDataService) {}

  ionViewDidLoad() {    
       this.dataService.getAllPokemon().then((data) => {    
           data.map((pocketMonster) => {
           > this.pocketMonsters = data;
               return pocketMonster;    
           });    
       });    
   }
}

Answer 2

I figured out my problem. I can do {{pocketMonster....}} to access what I need from each object. Example: {{pocketMonster.pokemonName}}.