Displaying data using AngularJS

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!

标签： angularjs rest scope jersey

1条回答

Bombasti

2楼-- · 2019-06-13 16:57

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.

0人赞添加讨论(0) 举报

Displaying data using AngularJS

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间