If I go to the second article called “Intro”, it shows the data from all the articles from that section, in this case the section is “Early years” (see “Article page image”).
What can I do, so it shows only the data needed for that single article?
Here’s how the home page now looks:
Article page image (Intro, from Early years section):
<ion-header>
<ion-navbar color="primary" text-center>
<ion-title>Nikola Tesla Biography</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-item-group *ngFor="let item of information; let i = index">
<ion-item-divider class="life-header" color="light">{{ item.name }}</ion-item-divider>
<ion-item-group *ngFor="let child of item.children; let j = index">
<ion-item class="life-item" (click)="navToArticle(item)">
<ion-thumbnail class="life-thumbnail" item-start>
<img src="assets/tesla.jpg">
</ion-thumbnail>
<h2>{{ child.name }}</h2>
<p>{{ child.information }}</p>
<ion-icon name="ios-arrow-forward" item-right item-end></ion-icon>
</ion-item>
</ion-item-group>
</ion-item-group>
</ion-content>
article.html
<ion-header>
<ion-navbar color="primary">
<ion-title>{{ item.name }}</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding class="bg">
<ion-item-group *ngFor="let child of item.children; let j = index;">
<img src="{{ child.img }}" alt="">
<p *ngFor="let v of generateArray(child.text)">{{ v }}</p>
</ion-item-group>
</ion-content>
information.json
{
"items": [{
"name": "Introduction",
"children": [{
"name": "Short biography",
"information": "Nikola Tesla (1856 – 1943) was a Serbian-American inventor, electrical engineer, mechanical engineer, physicist, and futurist... ",
"img": "assets/tesla3.jpg",
"text": [
"FIRST ARTICLE"
]
}]
},
{
"name": "Early years",
"children": [{
"name": "Intro",
"information": "Nikola Tesla was born an ethnic Serb in the village Smiljan...",
"img": "assets/tesla3.jpg",
"text": [
"SECOND ARTICLE"
]
},
{
"name": "Working at Budapest Telephone Exchange",
"information": "In 1881, Tesla moved to Budapest, Hungary, to work under Tivadar Puskás at a telegraph company...",
"img": "assets/tesla2.jpg",
"text": [
"THIRD ARTICLE"
]
}
]
},
{
"name": "Working at Edison",
"children": [{
"name": "Intro",
"information": "In 1882, Tivadar Puskás got Tesla another job in Paris with the Continental Edison Company",
"img": "assets/tesla3.jpg",
"text": [
"FOURTH ARTICLE"
]
},
{
"name": "A move to the US",
"information": "In 1884, Edison manager Charles Batchelor, who had been overseeing the Paris installation...",
"img": "assets/tesla2.jpg",
"text": [
"FIFTH ARTICLE"
]
}
]
}]
}
IF NEEDED
home.ts
import { Http } from '@angular/http';
import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { ArticlePage } from '../article/article';
import 'rxjs/add/operator/map';
@Component({
selector: 'page-home',
templateUrl: 'home.html'
})
export class HomePage {
information: any[];
constructor(public navCtrl: NavController, private http: Http) {
let localData = this.http.get('assets/information.json').map(res => res.json().items);
localData.subscribe(data => {
this.information = data;
});
}
toggleSection(i) {
this.information[i].open = !this.information[i].open;
}
toggleItem(i, j) {
this.information[i].children[j].open = !this.information[i].children[j].open;
}
savedNum = null;
navToArticle(item) {
this.navCtrl.push(ArticlePage, {
item: item
});
}
}
article.ts
import { NavController, NavParams } from 'ionic-angular';
import 'rxjs/add/operator/map';
// @IonicPage()
@Component({
selector: 'page-article',
templateUrl: 'article.html',
})
export class ArticlePage {
item: any;
constructor(public navCtrl: NavController, public navParams: NavParams) {
// constructor(public navCtrl: NavController, public navParams: NavParams, private http: Http) {
this.item = navParams.get('item');
}
generateArray(obj) {
return Object.keys(obj).map((key) => { return obj[key] });
}
ionViewDidLoad() {
console.log('ionViewDidLoad ArticlePage');
}
}