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!

Answer 1

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

Answer 2

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>

Answer 3

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>

Answer 4

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>

Answer 5

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.