CODEWITHSUNDEEP
jsonangularngfor
Federico
Federico

Reputation: 404

How to print key and value of object inside template?

how can I print the key and value of the object inside the template?

The template is 'kendo chart series item tooltip'

My HTML

<kendo-chart-series-item-tooltip>
  <ng-template let-value="value" let-category="category" let-series="series" let-dataItem="dataItem">
    <div *ngFor="let item of dataItem.subObject| keyvalue">
      {{item | json}}<br/>
      Key:{{item.key}} and Value:{{item.value}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

My JSON:

[
  {
    "id": "1Period",
    "subObject": [{"Alex":"10"},{"Mathew":"5"}],
  },
  {
    "id": "2Period",
    "subObject": [{"Alex":"2"},{"Mathew":"50"}]
  }
]

This code doesn't work and it returns this error:

Uncaught Error: Template parse errors: The pipe 'keyvalue' could not be found

Upvotes: 0

Views: 214

Answers (2)

Thomas S.
Thomas S.

Reputation: 86

You can define the following custom pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'forObject'
})
export class ForObjectPipe implements PipeTransform {

  transform(value: object): string[] {
    if (!value) {
      return [];
    }

    return Object.keys(value);
  }

}

And use it like that:

<kendo-chart-series-item-tooltip>
  <ng-template let-value="value" let-category="category" let-series="series" let-dataItem="dataItem">
    <div *ngFor="let key of dataItem.subObject | forObject">
      {{dataItem.subObject[key] | json}}<br/>
      Key:{{key}} and Value:{{dataItem.subObject[key]}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

Check out my boilerplate if you have issues defining the pipe.

Upvotes: 1

Abru007
Abru007

Reputation: 481

probably you want to set it like this

{ "id": "1Period", "subObject": [ { "key":"Alex", "value":"10"} }

and your HTML file like this

<kendo-chart-series-item-tooltip>
  <ng-template >
    <div *ngFor="let item of dataItem.subObject">
     <br/>
      Key:{{item.key}} and Value:{{item.value}}
      <br/><br/>
    </div>
  </ng-template>
</kendo-chart-series-item-tooltip>

Upvotes: 2

Related Questions