In my Ionic application I'm trying to retrieve local JSON data and load it into my application. I have set up a http.get in my javascript to retrieve my data but for some reason it isn't loading into the application. I'm unsure why. I think i have made a mistake in my html to load in the data but i'm unsure what it is.
JS:
.controller("photoCtrl", function($scope, $http, $ionicModal) {
$http.get('../file.json').success(function (data) {
$scope.items = data;
});
})
HTML:
<ion-list>
<ion-item ng-controller="photoCtrl" ng-repeat="item in items">
{{item}}
</ion-item>
</ion-list>
JSON:
{
"Item":"Under 5/6/7/8/9s",
"Item":"Under 10s",
"Item":"Under 11s",
"Item":"Under 12s",
"Item":"Under 13s",
"Item":"Under 14s",
"Item":"Under 15s",
"Item":"Under 15s"
}
First, try to sort their http, I recommend use
(file.json is in = www folder)
$http({method: 'GET', url: 'file.json'})
.success(function(data){
console.log(data.Items);
$scope.items = data.Items;
})
.error(function(){
})
.finally(function(){
});
Second, the JSON format, it might be better this way:
{
"Items":[
{ "Item" : "Under 5/6/7/8/9s"},
{ "Item" : "Under 10s"},
{ "Item" : "Under 10s"}
]
}
In case you want to add more values to their arrangement.
<ion-list>
<ion-item ng-repeat="item in items">
{{item.Item}}
</ion-item>
</ion-list>
Answer
HTML:
<ion-list ng-controller="photoCtrl"">
<ion-item ng-repeat="item in items">
{{ item.id }}
</ion-item>
</ion-list>
Javascript:
.controller("photoCtrl", function($scope, $http, $ionicModal) {
$scope.items = [
{ id: 9 },
{ id: 10 },
{ id: 11 },
{ id: 12 },
{ id: 13 },
{ id: 14 },
{ id: 15 },
{ id: 16 }
];
})