ionic3 - How to display data from a local JSON file by clicking the button?

Question

This is a multi-level accordion list and at the third level I put button (hammer icon) beside in each items. I added a toastController in the button but how can I display each item I clicked in problems to be fix (at the bottom side of the menu).

form.html ...

            <button ion-item (click)="toggleSection(i)" detail-none [ngClass]="{'section-active': item.open, 'section': !item.open}">
              <ion-icon item-left name="ios-arrow-forward" *ngIf="!item.open"></ion-icon>
              <ion-icon item-left name="ios-arrow-up" *ngIf="item.open"></ion-icon>
              {{ item.name }}
            </button>

              <ion-list *ngIf="item.children && item.open" no-lines style="margin-bottom: 0%">
                <!-- Second Level -->
                <ion-list-header *ngFor="let child of item.children; let j = index" no-padding style="margin-bottom: 0%">
                  <!-- Toggle Button -->
                    <button ion-item (click)="toggleItem(i, j)" detail-none class="child-item" *ngIf="child.children" no-padding no-lines>
                      <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>

              <!-- Direct Add Button -->
              <!-- <ion-item *ngIf="!child.children" detail-none class="child-item" text-wrap no-lines>
                <h2>{{ child.name }}</h2>
                <p text-lowercase>{{ child.information }}</p>
                <button ion-button outline item-end (click)="buyItem(child)">{{ child.price }}</button>
              </ion-item> -->

              <ion-list *ngIf="child.children && child.open">
                <!-- Third-Level -->
                <ion-item *ngFor="let item of child.children" detail-none class="child-item" text-wrap no-lines>
                  <ion-label>{{ item.name }}</ion-label>
                  <!-- <button ion-button  item-end (click)="buyItem(child)"><ion-icon ios="ios-hammer"></ion-icon></button> -->
                  <button ion-button color="dark" item-end (click)="tofix(item)">
                      <ion-icon ios="ios-hammer" is-active="false"></ion-icon>
                    </button>
                </ion-item>
              </ion-list>

            </ion-list-header>
          </ion-list>

        </ion-list-header>
    </ion-list>
  </ion-card>

    <div class="issue">
      <ion-card>
        <ion-card-header>
          Problems to be fix
        </ion-card-header>
            <p style="font-size: 1.3em; padding-left: 15px; color: black" >Main: </p>
            <p style="font-size: 1.3em; padding-left: 15px; color: black" >Kitchen: </p>
            <p style="font-size: 1.3em; padding-left: 15px; color: black" >Terrace: </p>
            <p style="font-size: 1.3em; padding-left: 15px; color: black" >Toilet: </p>
        <button ion-button full (click)="AreaPage()">Submmit</button>
      </ion-card>
    </div>
....

form.ts

import { Component, Input, OnInit } from '@angular/core';
import { IonicPage, NavController, NavParams, ToastController } from 'ionic-angular';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';


@IonicPage()
@Component({
  selector: 'page-form',
  templateUrl: 'form.html',
})
export class FormPage  implements OnInit{
  data: any[];

  @Input('item') item: any;

  constructor(public navCtrl: NavController, 
              public navParams: NavParams, 
              private http: Http,
              private toastCtrl: ToastController) {
                let localData = this.http.get('assets/data/menus.json').map(res => res.json().items);
                  localData.subscribe(data => {
                    this.data = data;
    });
  }

  toggleSection(i) {
    this.data[i].open = !this.data[i].open;
  }

  toggleItem(i, j) {
    this.data[i].children[j].open = !this.data[i].children[j].open;
  }

    ngOnInit() {
    }

    async tofix(item){
      let toast = await this.toastCtrl.create({
        message: `Added item to be fix : ${item.name}`,
        duration: 2000
      });
      toast.present();
    }

  ionViewDidLoad() {
    console.log('ionViewDidLoad FormPage');
  }

}

menu.json

{
  "items": [
    {
      "name": "MAIN",
      "children": [
        {
          "name": "Main Door",
          "children": [
            {
              "name": "Painted door lock"
            },
            {
              "name": "Painted door"
            },
            {
              "name": "Damaged door"
            },
            {
              "name": "Damaged door lock"
            },
            {
              "name": "Painted hinge"
            },
            {
              "name": "Stuck door"
            },
            {
              "name": "With gap below"
            },
            {
              "name": "Paint with cracks"
            },
            {
              "name": "Unfinished door paint"
            },
            {
              "name": "Gaps beside door knob"
            },
            {
              "name": "Door with voids"
            }
          ]
        },
      ]
    }
.... I just put the MAIN data in my json as the image only shows ....
  ]
}

Answer 1

You can add a global var to hold your selected item and display it in your template.

form.ts

public selectedTask: string = '';

...

async tofix(item){
    const toast = await this.toastCtrl.create({
        message: `Added item to be fix : ${item.name}`,
        duration: 2000
    });

    this.selectedTask += `${item.name} `;
    this.removeItemByName(item.name);
    toast.present();
}

private removeItemByName(name) {
    for (let i in this.data) {
        if (this.data[i].name === name) arr.splice(i, 1);
    }
}

form.html

<ion-card>
    <ion-card-header>
        Problems to be fix
    </ion-card-header>

    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Main: {{selectedTask }} </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Kitchen: </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Terrace: </p>
    <p style="font-size: 1.3em; padding-left: 15px; color: black" >Toilet: </p>
    <button ion-button full (click)="AreaPage()">Submmit</button>
</ion-card>

Edit

Added removeItemByName function to prevent the user to select item twice.