Show Json object properties

Question

In my application I have json array and I can display those data. all data have radio button. what I want is when I click on radio button, data of that json array item will print in html format in another component. Something like below. This is how it is showing

withing my product.component.ts I have below.

ngOnInit() {
   this.wordpressService.apiCall().subscribe((data)=>{
     console.warn("get api data ",data);
     this.title=data;
   })
}
radioHandle(event : any){
     this.post=event.target.value;
  }

Then within my product.component.html I display some json data as below.

<div class='container'>
  <div id="leftDiv">
   <div *ngFor="let data of title">
    <p>
      <input type="radio"
      name="posts"
      value="{{data | json}}"
      (change)="radioHandle($event)">
      {{data.id}}
    </p>
  </div>
</div>
<div id="rightDiv">
  <app-productDisplay [parentData]=post></app-productDisplay>
</div>
</div>

now I want to pass that selected data to another component call productDisplay.component.ts

 @Input() public parentData: any;

And display the data within productDisplay.component.html

{{parentData}}

It works. But the problem is it is display json object. But I want to print some properties of json object instead of whole json

Answer 1

Have you tried the JSON.parse()? I guess that could do what you described.

In your productDisplay.component.ts:

let parentDataParsed = JSON.parse(parentData)

And in your template:

{{parentDataParsed.Id}}

Answer 2

You have to parse the JSON first in product.component.ts

ngOnInit() {
   this.wordpressService.apiCall().subscribe((data)=>{
     console.warn("get api data ",data);
     this.parentDataParsed = JSON.parse(data)
   })
}

Pass the data to the productDisplay component by data binding

<app-product-display [parentData]="parentDataParsed"></app-product-display>

In the productDisplay component, you can show individual fields

<p>ID: {{parentData?.id}}</p>
<p>TITLE: {{parentData?.title}}</p>
....