How to load data in ng table from REST web service that return a JSON

Question

I want to load my table from a JSON that returns my REST web services in SpringMVC, but I get the following error that says that my rest method doesn't support the GET method.

The URL that my controller have mapped is this one

http://localhost:8080/MyApp/doc/showDocTable/

and the URL changes from that to this

http://localhost:8080/MyApp/doc/showDocTable/?count=10&page=1

I don't know why the URL changes to that since I'm doing just the basic example from the website http://ng-table.com/#/loading/demo-external-array

Here is the function in my controller that calls the webservices

var Api = $resource('http://localhost:8080/MyApp/doc/showDocTable/');
            this.tableParams = new NgTableParams({}, {
                getData: function (params) {
                    // ajax request to api
                    return Api.get(params.url()).$promise.then(function (data) {
                        params.total(data.inlineCount); // recal. page nav controls
                        return data.results;
                    });
                }
            });

And here is my controller method in Spring MVC

@RequestMapping(value = "/doc/showDocTable/", method = RequestMethod.GET)
public ResponseEntity<List<HistDoc>> showTable() {
    List<HistDoc> listHistDoc = docDAO.getDocs();


    return new ResponseEntity<List<HistDoc>>(listaHistDoc, HttpStatus.OK);
}

And here is the error that I get in my browser

GET XHR  http://localhost:8080/MyApp/doc/showDocTable/?count=10&page=1 [HTTP/1.1 405 Request method 'GET' not supported 6ms]

and here the error in my console

WARN    2016-08-11 12:46:58,206 [http-listener-1(4)] org.springframework.web.servlet.PageNotFound  - Request method 'GET' not supported

I think the problem is that somehow ngTable changes the URL to that weird URL and my web method in Spring doesn't know what to do.

EDIT 1 I removed the "/" from my backend method url like this `@RequestMapping(value = "/doc/showDocTable", method = RequestMethod.GET) public ResponseEntity> showTable() { List listHistDoc = docDAO.getDocs();

    return new ResponseEntity<List<HistDoc>>(listaHistDoc, HttpStatus.OK);
}`

and also I removed the "/" from the getData method in angularJs controller

var Api = $resource('http://localhost:8080/MyApp/doc/showDocTable');

But now I get this error in my browser firefox console

Error: $resource:badcfg
Response does not match configured parameter

Error in resource configuration for action `get`. Expected response to contain an object but got an array (Request: GET http://localhost:8080/MyApp/doc/showDocTable)

EDIT 2: Here is my HTML

<div class="col-lg-12" ng-controller="EstHistDoc as demo">

    <table ng-table="demo.tableParams" class="table table-bordered table-striped table-condensed">
        <tr ng-repeat="row in $data track by row.idDoc">
            <td data-title="'Name'" filter="{name: 'text'}" sortable="'name'">{{row.name}}</td>
            <td data-title="'Description'" filter="{description: 'text'}" sortable="'description'">{{row.description}}</td>
        </tr>
    </table>

and here is the JSON that I return from the backend

    [
   {
      "idHisReg":null,
      "idDoc":1,
      "name":doc one,
      "description:" "a description"
   },
   {
      "idHisReg":null,
      "idDoc":2,
      "name": doc two,
      "description:" "a seconddescription"
   }
]

Answer 1

Use Api.query(...) instead of using Api.get() should solve your error:

Error in resource configuration for action get . Expected response to contain an object but got an array (Request: GET http://localhost:8080/MyApp/doc/showDocTable )

Answer 2

您必须使用$resource.query() （ Api.query() ）而不是$resource.get() （ Api.get() ）。