Kati Ais Kati Ais - 1 year ago 123
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) {
.when('/main', {
templateUrl : 'main.html',
controller : 'MainCtrl'
.when('/service', {
templateUrl : 'service.html',
controller : 'ServicesCtrl'
.controller('MainCtrl', ['$scope', function($scope){


.controller('ServicesCtrl', ['$scope','$http', function($scope,$http){
$scope.services = response.data;

and this is service.html

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

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 Source

You have to use the following line:

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

like this:

<h3>{{ serv.id}} : {{serv.name }}</h3>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download