Как я могу отфильтровать и получить файл данных JSON, передав параметр по щелчку?

Question

У меня есть два файла json:

test.json

[{
    "id": 1,
    "name": "Home"
  },
  {
    "id": 2,
    "name": "Test"
  }
]

test2.json

[{
    "id-cat": 2,
    "name": "Test 1"
  },
  {
    "id-cat": 1,
    "name": "Test 2"
  }
]

form.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import { ButtonComponent } from '../atomic/button.component';
@Component({
    templateUrl: 'form.component.html',
    styleUrls: ['form.component.scss']
})
export class FormComponent {
    data: Object[];
    data2: Object[];
    constructor(private http: Http) {
        this.http.get('../assets/data/test.json')
            .subscribe(res => this.data = res.json());
    }
    private loadComponent = false;
    loadMyChildComponent(id: Number) {

        // missing code

        this.loadComponent = true;
    }
}

form.component.html

<ul>
    <li *ngFor="let d of data" (click)="loadMyChildComponent(d.id);">
        {{ d.name }}
    </li>
</ul>
<div *ngIf="loadComponent">
    <ul>
        <li *ngFor="let x of data2">
            {{ x.id-cat }}
        </li>
    </ul>
</div>

Когда я нажимаю на первый список, я хочу загрузить данные test2.json в зависимости от пройденного идентификатора. То же, что и id-cat этого файла.

Как связать это?

Answer 1

Вы можете сделать, как показано ниже:

test2.json

    [{
        "idcat": 2,
        "name": "Test 1"
     },
     {
       "idcat": 1,
       "name": "Test 2"
    }]

HTML

  <ul>
    <li *ngFor="let d of data" (click)="loadMyChildComponent(d.id);">
      {{ d.name }}
  </ul>
  <div *ngIf="loadComponent">
    <ul>
      <li *ngFor="let x of data2">
        {{ x.idcat }}
      </li>
    </ul>
  </div>

TS

export class FormComponent {
    data: Object[];
    data1: Object[];
    data2: Object[];
    constructor(private http: Http) {
        this.http.get('../assets/data/test.json')
            .subscribe(res => this.data = res.json());
        this.http.get('../assets/json/test2.json')
            .subscribe(res => this.data1 = res.json());
    }
    private loadComponent = false;

    loadMyChildComponent(id: Number) {

        // missing code

        this.loadComponent = true;
        this.data2 = this.data1.filter(res => res['idcat'] == id)
    }
}