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!

where do you want to access keyvalue pair in html or ts?

Chellappan வ
– Chellappan வ

2018-08-07 17:41:41 +00:00
Commented Aug 7, 2018 at 17:41 — Chellappan வ
– Chellappan வ, Commented Aug 7, 2018 at 17:41
Hi, In the HTML

AlejoDev
– AlejoDev

2018-08-07 17:42:49 +00:00
Commented Aug 7, 2018 at 17:42 — AlejoDev
– AlejoDev, Commented Aug 7, 2018 at 17:42
There is no such thing as a JSON (TypeScript) Object.

str
– str

2018-08-07 17:46:27 +00:00
Commented Aug 7, 2018 at 17:46 — str
– str, Commented Aug 7, 2018 at 17:46

Chellappan வ · Accepted Answer · 2018-08-07 18:00:41Z

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 7, 2018 at 18:00

answered Aug 7, 2018 at 17:45

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

5 Comments

AlejoDev Over a year ago

I'm using angular 5

Ashish Ranjan Over a year ago

Please add to your answer how you made dataKeys

Alexis_D Over a year ago

answer for angular 5 is also working for Angular 9 ( keyvalue not working as well)

Alexis_D Over a year ago

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 => stackblitz.com/edit/angular9-iterate-on-object-attribute)

Chellappan வ Over a year ago

As mentioned in the doc: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; }

Ashish Ranjan · Accepted Answer · 2018-08-07 17:52:06Z

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 7, 2018 at 17:52

Ashish Ranjan

13k5 gold badges32 silver badges53 bronze badges

answered Aug 7, 2018 at 17:45

maury844

1,27015 silver badges25 bronze badges

Comments

Sajeetharan · Accepted Answer · 2018-08-07 17:50:20Z

4

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>

answered Aug 7, 2018 at 17:50

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Comments

Ahmad · Accepted Answer · 2018-08-07 17:55:10Z

0

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>

answered Aug 7, 2018 at 17:55

Ahmad

3,9266 gold badges41 silver badges79 bronze badges

Comments

Alexis_D · Accepted Answer · 2020-06-28 12:46:29Z

0

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.

answered Jun 28, 2020 at 12:46

Alexis_D

1,9684 gold badges17 silver badges38 bronze badges

Collectives™ on Stack Overflow

How to Iterate JSON properties in TypeScript

5 Answers 5

5 Comments

Comments

Comments

component.ts

html

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

5 Comments

Comments

Comments

component.ts

html

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related