Блог

Главная - Вопросы по программированию - Показать свойства объекта Json

Показать свойства объекта Json

#json #angular

Вопрос:

В моем приложении у меня есть массив json, и я могу отображать эти данные. все данные имеют переключатель. я хочу, чтобы при нажатии на переключатель данные этого элемента массива json печатались в формате html в другом компоненте. Что-то вроде ниже. Вот как это проявляется

в моем файле product.component.ts у меня есть ниже.

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

Затем в моем product.component.html Я отображаю некоторые данные json, как показано ниже.

 lt;div class='container'gt;  lt;div id="leftDiv"gt;  lt;div *ngFor="let data of title"gt;  lt;pgt;  lt;input type="radio"  name="posts"  value="{{data | json}}"  (change)="radioHandle($event)"gt;  {{data.id}}  lt;/pgt;  lt;/divgt; lt;/divgt; lt;div id="rightDiv"gt;  lt;app-productDisplay [parentData]=postgt;lt;/app-productDisplaygt; lt;/divgt; lt;/divgt;

теперь я хочу передать эти выбранные данные другому компоненту, вызывающему productDisplay.component.ts

 @Input() public parentData: any;

И отображать данные внутри productDisplay.component.html

 {{parentData}}

Это работает. Но проблема в том, что это отображение объекта json. Но я хочу напечатать некоторые свойства объекта json вместо всего json

Комментарии:

1. Может {{parentData | json}} быть, поможет

2. @EMilen Он показывает данные json. Я хочу распечатать свойства отдельно. Что-то вроде parentData.Id. но это не работает

Ответ №1:

Вы пробовали JSON.parse()? Я думаю, это могло бы сделать то, что вы описали.

В вашем productDisplay.component.ts:

 let parentDataParsed = JSON.parse(parentData)

И в вашем шаблоне:

 {{parentDataParsed.Id}}

Комментарии:

1. Можете ли вы сказать мне, где это использовать в productDisplay.component.ts

2. Если вам не нужна строка json для чего-либо еще, я бы поместил ее прямо в часть подписки в product.component.ts и передал ее уже проанализированной в качестве входных данных компоненту productDisplay. Поэтому в компоненте ngOnInit() в продукте что — то вроде ...subscribe((data)=gt;{ ... this.parentDataParsed = JSON.parse(data) ... }) и вместо передачи родительских данных в качестве входных данных передайте уже проанализированный parentDataParsed. Или, я думаю, мог бы сделать конструктор в productDisplay.component.ts.

3. @Dinithi это была какая-то помощь или вам нужно больше?

4. Я не пробовал этого делать. Поскольку я новичок в angular, у меня нет идеи, как его использовать.

Ответ №2:

Сначала вы должны проанализировать JSON в файле product.component.ts

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

Передайте данные компоненту productDisplay с помощью привязки данных

 lt;app-product-display [parentData]="parentDataParsed"gt;lt;/app-product-displaygt;

В компоненте productDisplay вы можете отображать отдельные поля

 lt;pgt;ID: {{parentData?.id}}lt;/pgt; lt;pgt;TITLE: {{parentData?.title}}lt;/pgt; ....
Метки: