'Ionic way' of rendering JSON into HTML

1

I have a couchDB instance which will return JSON:

[
{date: “01/01/2015”, New : “hello there”, Old : “bye”},
{date: “01/02/2015”, Spam: “data”, New : "hello again}
]

I need to loop through each object in the JSON and render such that the keys in the JSON objects are headers, and the values of the JSON objects are subvalues:

<div class="card">
  <div class="item item-divider">
    01/01/2015
  </div>
  <div class="item item-text-wrap">
    <b>New</b><br />
    hello there. <br />
    <b>Old</b><br />
    bye <br />
  </div>
</div>
<div class="card">
  <div class="item item-divider">
    02/01/2015
  </div>
  <div class="item item-text-wrap">
    <b>Spam</b><br />
    data <br />
    <b>New</b><br />
    hello again <br />
  </div>
</div>

I have full control over the source of JSON (reduces risk of XSS).

Is what I am trying to do possible? What is the best way to achieve this?

I have been messing around directives so far.

2

This is more an angularjs question than an Ionic question.
Why don’t you try to wrap your card template in ng-repeat?

1 Like
3

Correct me if I am wrong, but I am not sure that would work because using ng-repeat I would need the keys of the values in the JSON object to output any data.

4

No, you don’t need to know the key. ng-repeat will give you a variable for each element/record in your array.
You can basically do what I’ve done on ion-slide here, but put the ng-repeat on your <div class="card">
Then you can access {{image.date}}, {{image.New}} and {{image.Old}} etc, except of course that you won’t call yours “image”

            <ion-slide ng-repeat="image in images">
                <div class="card">
                    <div class="item item-divider">
                        <strong>{{image.a}}</strong>
                    </div>
                    <div class="item">
                        <a ui-sref="tab.artist-detail({aid: image.aid, pid: image.pid})" class="button">
                            <img style="width: 100%; height: auto;" ng-src="{{image.url}}" height="auto" width="100%" />
                        </a>
                    </div>
                    <div class="item item-divider">

                    </div>
                </div>

            </ion-slide>