IONIC JSON Issue - json

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"
}
}
];
})

Answer 1

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}}