CODEWITHSUNDEEP
angular
RKzx
RKzx

Reputation: 13

How can I get data from a dynamic object

[
  {
    "title": "Battery",
    "sections": {
      "Capacity": "2",
      "Type": "1"
    }
  },
  {
    "title": "Процесор",
    "sections": {
      "Number of nuclei": "22",
      "Processor name": "33",
      "Frequency": "11"
    }
  },
  {
    "title": "Display",
    "sections": {
      "The type of matrix": "222",
      "Screen diagonal": "111"
    }
  }
]

How can I get data from it (In the template):

Title: (Battery)

key ------------------------> value:

capacity -------------> 2

type -----------------> 1

Title 2: (Processor)

key ------------------------> value

Title 3: (Display)

key ------------------------> value

Upvotes: 1

Views: 52

Answers (1)

Barremian
Barremian

Reputation: 31125

You could use the keyvalue pipe. Try the following

<div *ngFor="let item of obj">
  Title - {{ item.title }}
  <div *ngFor="let section of item.sections | keyvalue">
    {{ section.key }} - {{ section.value }}
  </div>
  <br>
</div>

Working example: Stackblitz

Note: keyvalue pipe was introduced in Angular v6.1.0. A solution for earlier versions could be found here.

Upvotes: 1

Related Questions