I’m trying to display the data from my json file using ng-repeat but it’s not working.
Below is my template code:
<div ng-hide="hidden" data-ng-repeat="person in persons">
<div class="item item-thumbnail-left">
<img src="img/ionic.png">
<div style="float: left;">
<h2 class="listCss">{{person.name}}</h2>
<h3>{{person.company}}</h3>
<p>{{persons.id}}</p>
</div>
<div style="float: right;padding-top: 20px;padding-right: 20px;">
<i class="icon ion-close-circled addConnection" style="font-size:40px;padding-right: 10px;" ng-click="hidden=!hidden"></i>
<i class="icon ion-person-add addConnection" style="font-size: 40px;" ng-click="addFriend()"></i>
</div>
<hr style="clear: both;top: 26px;position: relative;">
</div>
</div>
This is my js code
.controller(‘addFriendTabController’,function($scope,personService){
console.log(“addFriend tab”);
$scope.persons={};
$scope.persons=personService.getData();
$scope.addFriend=function(){
window.alert("Request Sent");
}
})
.factory(‘personService’,function($http){
var StudentDataOp = {};
StudentDataOp.getData=function(){
return $http.get(“js/data.json”).
then(function(response){ console.log(response.data); return response.data;})
};
return StudentDataOp;
})
And below is my json file content
[
{
“id”:1,
“name”:“John”,
“company”:“Infosys”
},
{
“id”:2,
“name”:“John2”,
“company”:“Infosys2”
},
{
“id”:3,
“name”:“John3”,
“company”:“Infosys3”
},
{
“id”:4,
“name”:“John4”,
“company”:“Infosys4”
},
{
“id”:5,
“name”:“John5”,
“company”:“Infosys5”
},
{
“id”:6,
“name”:“John6”,
“company”:“Infosys6”
},
{
“id”:7,
“name”:“John7”,
“company”:“Infosys7”
},
{
“id”:8,
“name”:“John8”,
“company”:“Infosys8”
}
]