Getting specific object in nested 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)
    );
 }

I am having a hard time with your language. what do you mean by "id" element in condition to Name. Are you saying that you want to get the id only if the name exists? — Philip Brack
– Philip Brack, Commented Oct 23, 2017 at 15:06
Can you update your question to include what the desired html would look like in the end. — Philip Brack
– Philip Brack, Commented Oct 23, 2017 at 15:15

Sasxa · Accepted Answer · 2017-10-23 15:42:02Z

2

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))

edited Oct 23, 2017 at 15:42

answered Oct 23, 2017 at 15:25

Sasxa

41.4k17 gold badges90 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

James Over a year ago

should I include this in my service or where I am subscribing?

Sasxa Over a year ago

I'd suggest to keep data as is in your services, and do these kind of transformations in components (where you actually need specific values).

James Over a year ago

isn't this only working with a single name and an id? What should I do if i have multiples?

Sasxa Over a year ago

You can use custom filter function myNameFilter(name) { return "true" when matches }, and use it .filter(o => myNameFilter(o.Name))...

James Over a year ago

Hi Sasxa, I am having a problem for deploying those .map functions. I am subscribing in component and returns whole object as res. Where should I include those map functions?

Tim Tharratt · Accepted Answer · 2017-10-23 17:42:46Z

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());
  }

}

this is almost exactly what I have. What I need to do is, to point to Names then acquire Id's. Sasxa's answer is what I was looking for, but still having a problem to deploy like he mentioned

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

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?

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Oct 23, 2017 at 15:26

Philip Brack

1,32815 silver badges26 bronze badges

10 Comments

James Over a year ago

i need to match with names?

Philip Brack Over a year ago

I think I got wht you want.

James Over a year ago

not sure how this matches the name given.. for example, if i am looking id:123 in condition to Steve, how does it know whether it's Steve or some other name?

Philip Brack Over a year ago

Do you want to know the ids for all students named Steve?

Philip Brack Over a year ago

@Saxsa seems to understand what you want.

|

Collectives™ on Stack Overflow

Getting specific object in nested JSON

3 Answers 3

5 Comments

1 Comment

component.ts

component.html

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

component.ts

component.html

10 Comments

Related