How can I get the code I used to have in Ionic 3 to work? I could consult a JSON and pass it to a list, now it’s no longer useful
import { Component } from ‘@angular/core’;
import { IonicPage, NavController} from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’
@IonicPage({
name:“BC”
})
@Component({
selector: ‘page-bc’,
templateUrl: ‘belen-bc.html’,
})
export class BPHPage {
information:any;
constructor(public navCtrl: NavController, private http: Http) {
let localData = http.get(‘assets/json/our.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;
}
}
And the HTML
<button class="ruta" ion-button round color= "danger" (click)="ir_mapabelen()">Ver Ruta</button>
<p align ="Center"><b>Toca la estación para desplegar Horario</b></p>
<ion-list-header *ngFor="let item of information; let i = index" no-lines no-padding>
<button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
<ion-icon item-left name="arrow-forward" *ngIf="!item.open"></ion-icon>
<ion-icon item-left name="arrow-down" *ngIf="item.open"></ion-icon>
{{ item.name }}
</button>
<ion-list *ngIf="item.children && item.open" no-lines>
<ion-list-header *ngFor="let child of item.children; let j = index" no-padding>
<button ion-item (click)="toggleItem(i, j)" *ngIf="child.children" class="child" detail-none>
<ion-icon item-left name="add" *ngIf="!child.open"></ion-icon>
<ion-icon item-left name="close" *ngIf="child.open"></ion-icon>
{{ child.name }}
</button>
<ion-item *ngIf="!child.children" ion-item detail-none class="child-item" text-wrap>
<h2>{{ child.name }}</h2>
<p><b>{{ child.information }}</b></p>
</ion-item>
<ion-list *ngIf="child.children && child.open">
<ion-item *ngFor="let item of child.children; let k = index" detail-none class="child-item" text-wrap>
<h2>{{ item.name }}</h2>
<p>{{ item.information }}</p>
</ion-item>
</ion-list>
</ion-list-header>
</ion-list>
</ion-list-header>
</ion-list>