Hey there! I'm relatively new to the world of Angular and Ionic, and I've embarked on a project to create a pokedex app. My approach involves using a JSON file containing an array of "pocket monsters". However, my current challenge lies in extracting this information from the JSON file and displaying it successfully. Unfortunately, all I see when running the application is a list of numbers instead of the desired content. Could someone lend a hand and point me in the right direction? To provide more context, I will include the data provider, JSON file, and the components and templates related to the home page.
<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;
});
}
}
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"
}
]
}