Displaying an object in angular2

Question

OK, I have this

{ "calledCust": { "no": 270, "yes": 9 }, "hasOpened": { "no": 254, "yes": 25 } }

and I have been trying this to display in the view.

<ul *ngFor="let profile of profiles.counts">
  <li>
    {{profile | json}}
  </li>
</ul>

because it is not a json array, angular just blows up with

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

and I really want to display the results as below.

calledCust YES:9
hasOpened YES:25

Many thanks

EDIT

here is the full json

{
    total_rows: 279,
    bookmark: "g2wAAAABaANkAB5kYmNvcmVAZGI0LnBvcnRlci5jbG91ZGFudC5uZXRsAAAAAmEAYj____9qaAJGQAnZi4AAAABiAAAB7mo",
    rows: [],
    counts: {
        calledCust: {
            no: 270,
            yes: 9
        },
        hasOpened: {
            no: 254,
            yes: 25
        }
    }
}

whare is `counts` prop inside object? – Pankaj Parkar Dec 05 '16 at 15:52 — Pankaj Parkar, Dec 05 '16 at 15:52
@PankajParkar I have edited the question, thanks:) – Jason Dec 05 '16 at 15:57 — Jason, Dec 05 '16 at 15:57

score 0 · Answer 1 · edited Dec 08 '16 at 23:03

You just need to convert it to a JSON array, something like:

let key; // var key for old JavaScript ES5
let arr = [];

key = 'calledCust';
arr[0] = obj[key];
arr[0].key = key;

key = 'hasOpened';
arr[1] = obj[key];
arr[1].key = key;

would be easy to create a pipe that will take your object and covert it to a JSON array then you would just do:

<ul *ngFor="let profile of profiles.counts | convertObjToJsonArray">

You can iterate over the properties of an object to make this solution more generic.

Displaying an object in angular2

1 Answers1