AngularJS: fetch json from server using AJAX

Question

I am looking at this tutorial. And I have such code:

<!DOCTYPE html>
<html lang="en" ng-app="">
<head>
    <meta charset="UTF-8">
    <title>SPA book_store</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope, $http) {
        $http.get("http://localhost:8080/book_store/rest/books_json/get")
                .then(function(response) {
                    $scope.books = response.data;
                });
    });
</script>

<div ng-app="myApp" ng-controller="myCtrl">
<input id="filter_input" type="text" ng-model="nameText"/>
<ul>
    <li ng-repeat="book in books | filter:nameText | orderBy:'name'">
        {{book.name}} - {{book.price}}
    </li>
</ul>
</div>

</body>
</html>

http://localhost:8080/book_store/rest/books_json/get is returning following json:

[  
   {  
      "book_id":1,
      "name":"Book1",
      "bought":false,
      "genre":"MR",
      "price":20,
      "users":[  

      ],
      "author":{  
         "author_id":1,
         "name":"Gogol",
         "books":[  

         ]
      }
   },
//...
]

But I see in a browser networking that request wasn't fire. What have I done wrong?

So you mean in your network tab there isn't any request to http://localhost:8080/book_store/rest/books_json/get ? Or doesn't it return anything? Or doesn't it display anything? — devqon
– devqon, Commented Aug 4, 2016 at 10:32
Check your console tab in developer tools of your browser, there must be some error. — Mohit Yadav
– Mohit Yadav, Commented Aug 4, 2016 at 10:33
Copied and pasted your code in this jsfiddle, and it does the request — devqon
– devqon, Commented Aug 4, 2016 at 10:35
I have exception in the browser console: angular.js:13920Error: [ng:areq] http://errors.angularjs.org/1.5.8/ng/areq?p0=myCtrl&p1=not%20a%20function%2C%20got%20undefined — Rudziankoŭ
– Rudziankoŭ, Commented Aug 4, 2016 at 10:39

Mohit Yadav · Accepted Answer · 2016-08-04 10:45:49Z

1

Remove the ng-app="" from the html tag or provide the module name ng-app="MyApp".

Also remove one of the ng-app directives either from the the body tag or the html tag.

It is good practice to user the ng-app directive on the HTML tag if you are using just one angular app.

answered Aug 4, 2016 at 10:45

Mohit Yadav

1561 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS: fetch json from server using AJAX

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related