Question

我遵循从Web服务检索到的JSON，并且我能够通过在html中对索引进行硬编码来获取嵌套JSON中的特定元素。以下是示例数据。这只是整个JSON的一部分，我抓住了其余部分并且它们都处于相同的顺序。

现在，我想得到＆＃34; id＆＃34;符号条件中的元素。将给出所有名称，但名称所在的表的索引是未知的。我需要能够获得＆＃34; id＆＃34;对于所有给定的名字。该怎么办呢？

{
    "School": {
        "Table": [
            {
                "Name": [ "Leo" ],
                "id": [ "123" ],
                "class": [ "A" ]
            },
            {
                "Name": [ "Kelvin" ],
                "id": [ "456" ],
                "class": [ "B" ]
            }
        ]
    }
}

 ngOnInit(): void {
    this.appService.getData().subscribe(res =>
      this.results = res,
      error => console.log(error)
    );
 }

Answer 1

这可能是您正在寻找的内容：

School.Table
  .filter(o => o.Name === 'condition')
  .map(o => o.id)

例如：

<p *ngFor="let id of ids$ |async"> {{ id }} </p>

this.ids$ = this.service.getSchool()
  .map((o: School) => o.Table
    .filter(o => o.Name === 'condition')
    .map(o => o.id))

Answer 2

已经说过但是使用了数据服务。一旦返回了JSON数据，就可以更容易地将其转换为您想要的方式。我最近对此做了一点点。以下是完成此操作的数据服务示例。填充this.gearDataJSON = gearData;后，您可以轻松地将数据处理为易于在HTML端使用的内容。

<强>组件

import { Component, OnInit } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { Observable } from 'rxjs/Rx';
import { Injectable } from '@angular/core';

import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/Rx';

import { GearDataService } from '../../services/geardata.service'

@Component({
  selector: 'app-gears',
  templateUrl: './gears.component.html',
  styleUrls: ['./gears.component.css']
})

@Injectable()

export class GearsComponent implements OnInit {

  constructor(public gearDataService : GearDataService) {}

  gearDataJSON;                                                                                    // Holds a complete copy of gears.json data
  manufacturerNames : string[];                                                                    // Bit of JSON that we want to chop off or process

  ngOnInit()
  {

    this.gearDataService.getGearData().subscribe((gearData) =>                                     // Load in gear data and populate array for control and selection
    {

      this.gearDataJSON = gearData;

      this.manufacturerNames = gearData.manufacturers;

     });

  }

<强>的DataService

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

@Injectable()
export class GearDataService {
  constructor(public http : Http) {}

  getGearData()
  {
    return this.http.get("./assets/gears.json")
    .map(res => res.json());
  }

}

Answer 3

假设你的json就像 -

component.ts

 school:any = {
      Table:[
         {
            name: "Steve",
            id:"123"            
         },
         {
            id:"456"
         }
      ]
   };

如果您希望输出html看起来像您建议的那样，您确实不需要匹配名称，但可以使用迭代。

component.html

<table>
    <tr>
    <ng-container *ngFor="let user of school.Table">
         <td>{{user.name}}</td>
     </ng-container>
     </tr> 
    <tr>
    <ng-container *ngFor="let user of school.Table">
         <td>{{user.id}}</td>
     </ng-container>
     </tr> 
  </table>

这样就够了吗？

在嵌套的JSON中获取特定对象

3 个答案:

component.ts

component.html