Getting specific object in nested JSON - json

Question

I have following JSON retrieved from Web service and I am able to get specific element in nested JSON by hard-coding the index in html. Below is the sample data. This is just a portion of entire JSON, I caught rest of them and they are all in same order.
Now, I would like to get "id" element in condition to Name. All names will be given, but index for Table where Names located are unknown. I need to be able to get "id" for all given names. How should proceed this?
{
"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

This might be what you're looking for:
School.Table
.filter(o => o.Name === 'condition')
.map(o => o.id)
For example:
<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

it's already been said but use a data service. Once that has returned the JSON data it's much easier to transform it to exactly how you want it. I've done a bit to this recently. Here's an example of a data service that does exactly this. Once this.gearDataJSON = gearData; is populated you can easily process the data into something the easy to work with on the HTML side.
Component
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

Suppose that your json was something like-
component.ts
school:any = {
Table:[
{
name: "Steve",
id:"123"
},
{
id:"456"
}
]
};
If you want the output html to look like you suggested you don't really need to match the name but can just use iteration.
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>
Would that suffice?