How can I get data from a dynamic object

Question

[
  {
    "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

Maybe this ist what you're looking for. https://stackoverflow.com/a/51491848/7600725 — Sebastian Münster, Apr 23 '20 at 13:42

score 1 · Accepted Answer · answered Apr 23 '20 at 13:45

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.

How can I get data from a dynamic object

1 Answers1