How to Iterate JSON properties in TypeScript

Question

My question is very simple, I have a following JSON Typescript Object and I like to Iterate trought the JSON properties

{"work_type":"Fabricación","work_type_resp":"Mesa","looking_for":"Relación Calidad/Precio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width":"22","high":"34","depth":"","modifications":"mod"}

The code used is the following angular TypeScript component:

export class DetailsOnlineQuoteModalComponent implements OnInit {

  @Input() title;
  @Input() values:string;
  properties:JSON;

  constructor(public activeModal: NgbActiveModal) { }

  ngOnInit() {
    this.properties=JSON.parse(this.values);
    console.log(this.properties);
  }

}

What I really need is to go through the key-value attributes of the JSON and show them in my HTML.

Many Thanks!

[There is no such thing as a JSON (TypeScript) Object](https://stackoverflow.com/questions/2904131/what-is-the-difference-between-json-and-object-literal-notation). — str, Aug 07 '18 at 17:46

Chellappan வ · Accepted Answer · 2018-08-07T18:00:41.487

13

If you are using angular 6.1 use keyvalue pipe

<div *ngFor="let title of data | keyvalue">
  {{title.key}}
</div>

For Angular 5

<div *ngFor="let key of dataKeys">
  {{key}} ------------- {{data[key]}}
</div>
get dataKeys() { return Object.keys(this.data); }

Example:https://stackblitz.com/edit/keyvalue-pipe-qtaqnm

edited Aug 07 '18 at 18:00

answered Aug 07 '18 at 17:45

Chellappan வ

23,645
3
29
60

I'm using angular 5 – AlejoDev Aug 07 '18 at 17:46
1

Please add to your answer how you made `dataKeys` – Ashish Ranjan Aug 07 '18 at 17:56
answer for angular 5 is also working for Angular 9 ( keyvalue not working as well) – Alexis_D Jun 28 '20 at 12:47
Hi Chellapan, actually I got an error when using the model to initiate the object data.(or person in my example / please have a look here for more details => https://stackblitz.com/edit/angular9-iterate-on-object-attribute) – Alexis_D Jun 28 '20 at 21:47
As mentioned in the doc:https://angular.io/api/common/KeyValuePipe#input-value, You have to use Interfaces to describe Indexable Types. Change your interface as follows export class Person{ [key: string]: string, name:string; surname:string; location:string; age:string; } – Chellappan வ Jun 29 '20 at 05:59

score 5 · Answer 2 · edited Aug 07 '18 at 17:52

5

As per your comment, I'm assuming you want to do an ngFor on the HTML to display each one of the key-value pairs

<div *ngFor="let key of Object.keys(properties)">
  {{properties[key]}} --> this is the value
</div>

edited Aug 07 '18 at 17:52

Ashish Ranjan

12,760
5
27
51

answered Aug 07 '18 at 17:45

maury844

1,210
15
25

score 4 · Answer 3 · answered Aug 07 '18 at 17:50

You can get all the keys using Object.Keys and assign to a variable as follows,

this.properties=JSON.parse(this.values);
let response = Object.keys(this.propertie);

now you can use ngFor over it,

<div *ngFor="let key of response ">
  {{properties[key]}}  
</div>

score 0 · Answer 4 · answered Aug 07 '18 at 17:55

component.ts

let obj = {"work_type":"Fabricación","work_type_resp":"Mesa","looking_for":"Relación Calidad/Precio","image":"https://s3-sa-east-1.amazonaws.com/online-quotation-images/153366018967.png","width":"22","high":"34","depth":"","modifications":"mod"}

this.keyOfObj = Object.keys(obj);

html

<div *ngFor="let key of keyOfObj ">
  {{obj[key]}}
</div>

score 0 · Answer 5 · answered Jun 28 '20 at 12:46

unfortunately seems to be NOT working (with keyvalue) with ANGULAR_9

see here for a comparison of full different way of doing: https://stackblitz.com/edit/angular9-iterate-on-object-attribute

otherwise the answer by defining a method to do the job is still working.

How to Iterate JSON properties in TypeScript

5 Answers5

component.ts

html

Linked