IONIC JSON Issue

Question

I am trying to list all the books title, picture and author in the home page. But I am seeing nothing in the home page. Really need someone to help out. I am still learning how to use data coming from JSON.

Please see my codepen http://codepen.io/ccrash/pen/rLAVXG

home.html

<ion-view view-title="Dashboard">
  <ion-content class="padding">
    <h2>Ionic GET Json Example</h2>
    <ion-item ng-repeat="x in books">
      <div> {{x.data.items.title}} </div>
      <div> {{x.data.items.image[0]}} </div>
      <div> {{x.data.items.author}} </div>
    </ion-item>
  </ion-content> 
</ion-view>

App.js

.controller('HomeCtrl', function($http, $scope, $ionicSideMenuDelegate) {
  $scope.books = [
{
  "status": "OK",
  "data": {
    "category": "book",
    "language": "en",
    "items": [
      {
        "category": "book",
        "language": "en",
        "title": "book 1",
        "image": [
          "https://pbs.twimg.com/profile_images/739247958340698114/fVKY9fOv.jpg"
        ],
        "author": "Mr X",
        "snippeted": "This is the snippets",
        "summary": "Summary1",
        "pub_datetime": "2016-08-18 18:56:00",
        "link": "/news/1",
        "sid": 1,
        "mod_datetime": "2016-08-18 19:05:55",
        "freecontent": "yes"
      },
      {
        "category": "book",
        "language": "en",
        "title": "book 2",
        "image": [
          "http://www.vodafone.co.nz/cms/images/credit-card.jpg"
        ],
        "author": "Mr Y",
        "snippeted": "Snippet 2",
        "summary": "Summary 2",
        "pub_datetime": "2016-08-18 18:53:00",
        "link": "/news/352837",
        "sid": 2,
        "mod_datetime": "2016-08-18 19:07:59",
        "freecontent": "yes"
      },
      {
        "category": "book",
        "language": "en",
        "title": "book 3",
        "image": [
          "https://i.ytimg.com/vi/LNuFe2HV8Bs/maxresdefault.jpg"
        ],
        "author": "Mr Z",
        "snippeted": "Snippet 3",
        "summary": "Summary 3",
        "pub_datetime": "2016-08-18 18:51:00",
        "link": "/book/352835",
        "sid": 3,
        "mod_datetime": "2016-08-18 18:55:32",
        "freecontent": "yes"
      }
    ],
    "next_cursor": "75a",
    "next_url": "/c/en/book/75a?alt=json",
    "mod_datetime": "2016-08-18 19:26:36"
  }
}
  ];
})

score 0 · Answer 1 · answered Aug 18 '16 at 12:53

0

Maybe you should learn more about json.

You should use ng-repeat="x in books[0].data.items" to get each book of your book list, then you can get image title like this {{x.title}}

answered Aug 18 '16 at 12:53

Max

463
4
11

Thanks for your advice Twisted M. It worked. I tried quite a few method and it did not work. I am still learning. Sorry about that. Thank you. – Jsmidt Aug 18 '16 at 15:48
Hi Twisted M, do you mind taking a look at the question here ? http://stackoverflow.com/questions/39035134/ionic-getting-remote-json-data When I copy the json data and have it as an object here. It is working fine, but when I collect the data from the remote server, I didn't see the data at all. – Jsmidt Aug 19 '16 at 09:08

IONIC JSON Issue

1 Answers1