Displaying data using AngularJS

Question

I am trying to represent some data taken from database in a table. I am using jersey as back-end and I have tested it in Postman that it works. The problem is I cannot display my data in the table in front-end, when I use AngularJS. It only shows me a blank table, without data at all. I am pretty new to AngularJS and I really want anyone of you to help me find the problem with my piece of code below.

list_main.js

angular.module('app', [])
    .controller('ctrl', function($scope, $http){
         $scope.bookList = [];


         $scope.loadData = function(){
              $http.get('http://localhost:8080/BookCommerce/webapi/list').then(function(data){
                   $scope.bookList = data;
                   console.log($scope.bookList);
              })
         }


         $scope.loadData();
    })

index2.html

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

        <title>List Of Books</title>

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></s‌cript>

        <script src="js/list_main.js"></script>
    </head>
    <body>
        <div class="row" data-ng-controller="ctrl" data-ng-app="app" data-ng-init="loadData()" style="margin: 10px;">
            <div class="col-md-7">
                <div class="panel panel-primary">

                            <table cellpadding="0" cellspacing="0" border="0" class="table table-striped table-bordered" id="exampleone">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Title</th>
                                        <th>Author</th>
                                        <th>Description</th>
                                        <th>Price</th>
                                    </tr>                                    
                                </thead>
                                <tbody>
                                    <tr data-ng-repeat="book in bookList">
                                        <td>{{book.book_id}}</td>
                                        <td>{{book.book_title}}</td>
                                        <td>{{book.book_author}}</td>
                                        <td>{{book.book_description}}</td>
                                         <td>{{book.book_price}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
    </body>
</html>

ListDAO.java

public class ListDAO {
    public List<Book> findAll() {
        List<Book> list = new ArrayList<Book>();
        Connection c = null;
        String sql = "SELECT * FROM book";
        try {
            c = ConnectionHelper.getConnection();
            Statement s = c.createStatement();
            ResultSet rs = s.executeQuery(sql);
            while (rs.next()) {
                list.add(processRow(rs));
            }
        } catch (SQLException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        } finally {
            ConnectionHelper.close(c);
        }
        return list;
    }
    protected Book processRow(ResultSet rs) throws SQLException {
        Book book = new Book();
        book.setBook_id(rs.getInt("book_id"));
        book.setBook_title(rs.getString("book_title"));
        book.setBook_author(rs.getString("book_author"));
        book.setBook_description(rs.getString("book_description"));
        book.setBook_price(rs.getInt("book_price"));

        return book;
    }

}

ListResource.java

@Path("/list")



    public class ListResource {

      ListDAO dao=new ListDAO();

        @GET

        @Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML })
        public List<Book> findAll() {
            System.out.println("findAll");
            return dao.findAll();
        }

    }

Please help me. Thank you!

Your code looks fine , i guess you are not moving data to local variable properly. Please look at the example.plnkr.co/edit/Fll4X63UZzl24QsCKqVj?p=preview — Younis Ar M
– Younis Ar M, Commented Apr 28, 2017 at 4:34
I added this missing line 'console.log($scope.bookList);' from your edit but nothing happens — Lilly
– Lilly, Commented Apr 28, 2017 at 4:43
can you create a plunkr solution , so that i can look into at it. console.log() is to log something in console. It can be used for debugging. — Younis Ar M
– Younis Ar M, Commented Apr 28, 2017 at 5:31

Lee Francis Williams · Accepted Answer · 2017-04-28 14:48:46Z

Okay this is much better than the last time,

There's still some bits wrong with your JS - it should look like this :

// Code goes here

var baseUrl = "https://demo5019544.mockable.io/";

angular.module('app', [])
    .controller('ctrl', function($scope, $http){
         $scope.bookList = [];
         $scope.loadData = function(){
              $http.get(baseUrl + 'BookCommerce/webapi/list').then(function(data){
                   $scope.bookList = data.data;
              })
         }

    })

I made a demo REST service at : https://demo5019544.mockable.io/BookCommerce/webapi/list

which produces the kind of output your web service should product, I tested the code with this web service and with the tweaks I made it worked -- Yay.

The last thing I'd do now is check that your web service is throwing out the same / similar output that my mock is producing.

Collectives™ on Stack Overflow

Displaying data using AngularJS

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related