Showing correct data from JSON data object


#1

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');
    }
}

#2

Start by cleaning up your variable names: item is either a section or article etc. Then you code will be much cleaner and clearer.