Angularjs Can't pass json data to directive from controller

Question

I am new to Angularjs and I am trying to pass json data from controller to directive.The result is nothing showed and I got the following errors:

1.Uncaught SyntaxError: Unexpected token } in line 29.

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.3.14/$injector/modulerr?p0=myApp&p1=Error%3A%…gleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.14%2Fangular.min.js%3A17%3A381)

I don't know exactly how to fix this errors.

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 
  <display simo='simo'></display>
</div>

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK")
        .success(function (data) {
            $scope.simo = data;
            console.log($scope.simo)
        });

});

app.directive('display',function(){
    return {
        restrict: 'E',
        scope: { simo: '=' },
        template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>'
    };
});
</script>

Edit: Remote file is

{
  "records": [
    {
      "Name": "Alfreds Futterkiste",
      "City": "Berlin",
      "Country": "Germany"
    },
    {
      "Name": "Ana Trujillo Emparedados y helados",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Antonio Moreno Taquería",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Around the Horn",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "B's Beverages",
      "City": "London",
      "Country": "UK"
    },
    {
      "Name": "Berglunds snabbköp",
      "City": "Luleå",
      "Country": "Sweden"
    },
    {
      "Name": "Blauer See Delikatessen",
      "City": "Mannheim",
      "Country": "Germany"
    },
    {
      "Name": "Blondel père et fils",
      "City": "Strasbourg",
      "Country": "France"
    },
    {
      "Name": "Bólido Comidas preparadas",
      "City": "Madrid",
      "Country": "Spain"
    },
    {
      "Name": "Bon app'",
      "City": "Marseille",
      "Country": "France"
    },
    {
      "Name": "Bottom-Dollar Marketse",
      "City": "Tsawassen",
      "Country": "Canada"
    },
    {
      "Name": "Cactus Comidas para llevar",
      "City": "Buenos Aires",
      "Country": "Argentina"
    },
    {
      "Name": "Centro comercial Moctezuma",
      "City": "México D.F.",
      "Country": "Mexico"
    },
    {
      "Name": "Chop-suey Chinese",
      "City": "Bern",
      "Country": "Switzerland"
    },
    {
      "Name": "Comércio Mineiro",
      "City": "São Paulo",
      "Country": "Brazil"
    }
  ]
}

Can you try this for your template? <li ng-repeat="x in simo">{{ x.Name }}, {{ x.Country }}</li> — Kyle
– Kyle, Commented Apr 20, 2016 at 21:09

cDecker32 · Accepted Answer · 2016-04-20 21:19:23Z

I'd give this a shot http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">

<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope, $http) {
    $http.jsonp("http://localhost/json/customer.php?callback=JSON_CALLBACK")
        .success(function (response) {
            $scope.simo = response.data;
            console.log($scope.simo)
        });

});

app.directive('display',function(){
    return {
        restrict: 'E',
        scope: { simo: '=' },
        template: '<li ng-repeat="x in simo">{{ x.Name + ', ' + x.Country }}</li>'
    };
});
</script>

Not sure if your intent was to pass the entire response object to the directive, but response.data is the location of what you're likely expecting back from the ajax call.

Aside from that I would make sure that your object structure is correct. Or if you're returning an array that you set that flag in the $http call.

ImperfectClone · Accepted Answer · 2016-04-20 21:26:14Z

0

@KKKKKKKK beat me to it in a comment, but the problem is in the template property. For example (replacing the call to the HTTP backend with static test data, so that the code can run without it), the following works:

<script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 
  <display simo='simo'></display>
</div>

<script>
  var app = angular.module('myApp', []);
  app.controller('customersCtrl', function($scope, $http) {
    $scope.simo = [{
      Name: 'Frodo',
      Country: 'The Shire'
    }, {
      Name: 'Boromir',
      Country: 'Gondor'
    }];
  });

  app.directive('display',function() {
    return {
      restrict: 'E',
      scope: { simo: '=' },
      template: '<li ng-repeat="x in simo">{{ x.Name }}, {{ x.Country }}</li>'
    };
  });
</script>

answered Apr 20, 2016 at 21:26

ImperfectClone

1131 gold badge2 silver badges8 bronze badges

1 Comment

ImperfectClone Over a year ago

-Of course, this is assuming that you are confident that your backend is indeed returning an array of objects with properties 'Name' and 'Country'

Collectives™ on Stack Overflow

Angularjs Can't pass json data to directive from controller

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related