使用 Angular 在 JSON 文件中按 ID 搜索对象 2+

Question

我有一个像这样的 JSON 文件，总结：

{
    "id": "1",
    "country": "Brazil",
    "state": [
        {"id": "1", "name": "Acre", 
            "city": [ { "id": "1", "name": "Rio Branco"}, 
                      { "id": "2", "name": "Xapuri"}, 
                      { "id": "3", "name": "Cruzeiro do Sul"} ] 
}

我在视图中创建了 3 个 select 选项，我必须先 select 国家，然后根据国家 ID，我需要填写第二个 select 选项与状态。在 select 州之后，我需要用城市填充第三个 select 选项。

我创建了 return 所有 JSON 文件的 PlacesService：

  getPlaces() {
    return this.http.get('assets/database/places.json')
    .map( (res: Response) => res.json());
  }

然后在我的组件中调用此服务并且运行良好：

this.placesService.getPlaces().subscribe(dados => this.places= dados);

好的，我知道如何 return JSON 文件的所有数据，但我不知道如何在 JSON 文件和 returns 仅与这些 ID 相关的对象。

我想知道如何解决这个问题以及最佳做法是什么，使用唯一 json 文件中的所有对象或划分其他 json 文件（例如：countries.json, states.json, cities.json)

Answer 1

更有效的方法是将它们分成单独的平面数组，然后将 "foreign keys" 添加到城市，将 countryId 添加到州。

如果您决定不划分，例如您可以从嵌套对象中找到 Array.prototype.find:

getCountry(id) {
    return this.countries.find(c => c.id === id);
}

getState(id, country) {
    return country.state.find(s => s.id === id);
}

getCity(id,state) {
    return state.city.find(c => c.id === id);
}

const city = this.getCity('2', getState('1', getCountry('1'))); // Xapuri

因此，如您所见，3 个平面阵列会使事情变得更简单。您可以通过简单的查找调用从所有城市中按 ID 找到一个城市，或者通过过滤找到一个州的所有城市：

const acreCities = cities.filter(c => c.stateId === '1');

使用 Angular 在 JSON 文件中按 ID 搜索对象 2+

Search object by ID inside JSON file using Angular 2+

typescript

angular-http

angular

angular5