Kati Ais Kati Ais - 1 month ago 6
AngularJS Question

json not working in Angular

I'm a beginner in Angular so I hope someone to help me!

This is my script.js

ar app = angular.module('computer', ['ngRoute'])
.config(['$routeProvider',function($routeProvider) {
$routeProvider
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
})
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
})
.otherwise({redirectTo:'/main'});
}])
.controller('MainCtrl', ['$scope', function($scope){

}])

.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$http.get('serviceData.json').then(function(response){
console.log(response);
$scope.services = response.data;
});
}]);


and this is service.html

<div class="row">
<div class="col-md-12">
<h2>Services</h2>
<div ng-repeat="serv in services">
<div class="row service">
<div class="col-md-2">
<img src="computer-icon.png" class="img-responsive">
</div>
<div class="col-md-10">
<h3>{{ serv.id : serv.name }}</h3>
<p>{{serv.Description}}</p>
<button class="btn btn-primary">Read Moreā€¦</button>
</div>
</div>
</div>
</div>




and serviceData.json

[{
"id": 1,
"name": "Reparation",
"Description": "Reparation of your hardware"
}, {
"id": 2,
"name": "Installation",
"Description": "Installation of your hardware"
}, {
"id": 3,
"name": "Reparation and Reset",
"Description": "Reparation and Reset of your hardware"
}]


But I have this error in console
angular.min.js:118 Error: [$parse:syntax] http://errors.angularjs.org/1.5.8/$parse/syntax?p0=%3A&p1=is%20an%20unexpected%20token&p2=9&p3=serv.id%20%3A%20service.name&p4=%3A%20service.name

and anything display in screen.
Thank you for help !

Answer

You have to use the following line:

<h3>{{ serv.id : serv.name }}</h3>

like this:

<h3>{{ serv.id}} : {{serv.name }}</h3>