in ionic i am not able to fetch data from json file
Question
I am not able to fetch json file data here is my code please help me to solve this problem html code is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<script src="js/app.js"></script>
<script src="js/data.json"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-dark">
<h2 class="title">Artist List</h2>
</ion-header-bar>
<div class="bar bar-subheader
item-input-inset bar-light">
<label class="item-input-wrapper">
<i class="icon ion-search"></i>
<input type="search" placeholder="Search">
</label>
</div>
<ion-content ng-controller="ListController"
class="has-subheader">
<ion-list>
<ion-item ng-repeat='item in artists'
class="item-thumbnail-left item-text-wrap">
<img src="img/{{item.shortname}}_tn.jpg" alt="{{item.name}} Photo" >
<h2>{{item.name}}</h2>
<h3>{{item.reknown}}</h3>
<p>{{item.bio}}</p>
</ion-item>
</ion-list>
</ion-content>
</ion-pane>
</body>
</html>
aap.js file is
.controller('ListController', ['$scope', '$http', function($scope, $http){
$http.get('js/data.json').success(function(data){
$scope.artists = data;
});
}]);
data.json file is
[
{
"shortname": "Barot_Bellingham",
"name": "Barot Bellingham",
"reknown": "Royal Academy of Painting and Sculpture",
"bio": "Barot has just finished his final year at The Royal Academy",
},
{
"shortname": "Constance_Smith",
"name": "Constance Smith",
"reknown": "Academy of Painting and Sculpture",
"bio": "Smith has just finished his final year at The Royal Academy",
}
]
2 answers
solution1
0 2016-10-31 10:18:24
here is the working link http://plnkr.co/edit/soWghwLtwXtjQC1ZnmTC?p=preview
i found a problem in your JSON file that your data is ending with a comma in each block so your not getting data in to artists so your json should be like below
[
{
"shortname": "Barot_Bellingham",
"name": "Barot Bellingham",
"reknown": "Royal Academy of Painting and Sculpture",
"bio": "Barot has just finished his final year at The Royal Academy"
},
{
"shortname": "Constance_Smith",
"name": "Constance Smith",
"reknown": "Academy of Painting and Sculpture",
"bio": "Smith has just finished his final year at The Royal Academy"
}
]
solution2
0 2016-10-31 11:08:29
This might not be related to you problem, but you should consider using then() instead of success() . The use of success() and error() has been depreciated since 1.4.4 i think.
$http.get('js/data.json').then(function(data){
// successcallback
}, function(error){
// errorcallback
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.