Steps for populating an ng-table with data retrieved from a REST web service that returns a JSON format

I am currently facing an issue while trying to load my table from a JSON response that I receive from REST web services in SpringMVC. The error message I received indicates that my REST method does not support the GET request.

The URL mapped in my controller is:

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

However, the URL changes unexpectedly to:

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

This change in URL format is puzzling as I am following a basic example from this website

Here is the function within my controller responsible for calling the web services:

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;
                    });
                }
            });

Additionally, here is the relevant controller method in Spring MVC:

... ...

Any idea what could be causing this unusual URL transformation and subsequently leading to the error?

EDIT 1 I made some modifications to both the backend URL configuration and the AngularJS controller method URL as mentioned below:

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

    return new ResponseEntity<List<HistDoc>>(listHistDoc, HttpStatus.OK);
}
var Api = $resource('http://localhost:8080/MyApp/doc/showDocTable');

However, these changes resulted in a new error appearing in the browser console:

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

EDIT 2: Included below is the HTML snippet along with the JSON data returned from the backend:

... ...

Answer №1

To fetch the data, it is recommended to use $resource.query() or Api.query() over $resource.get() and Api.get().

Answer №2

Instead of using Api.get(), try utilizing Api.query(...) to resolve the issue you are experiencing:

The error in the resource configuration for the action get can be resolved by expecting a response that contains an object instead of an array (Request: GET http://localhost:8080/MyApp/doc/showDocTable)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Evaluating the generated HTML using JavaScript and Selenium testing

I am a new user of Selenium using C# and I want to automate the login process on a third-party website. When I manually navigate to the page in Chrome and inspect the elements, I can see the text boxes for username and password. <input type="text" id=" ...

JavaScript - retrieve only the domain from the document.referrer

I am trying to extract only the domain from referrer URLs. Two examples of referrer URLs I encounter frequently are http://www.davidj.com/pages/flyer.asp and http://www.ronniej.com/linkdes.com/?adv=267&loc=897 Whenever I come across URLs like the ones ...

The selection in one dropdown menu influences the options in another dropdown menu

My partner and I have teamed up to develop a React translation application that utilizes the Lexicala API. Our project includes two selector components: one for choosing the source language and another for selecting the target language. Users will first pi ...

Locating the save directory with fileSystem API

I've been working on saving a file using the fileSystem API. It appears that the code below is functional. However, I am unable to locate where the saved file is stored. If it's on MacOS, shouldn't it be in this directory? /Users/USERNAM ...

Seeking assistance with basic Javascript/Jquery for Ajax on Rails 3 - can anyone help?

I've been diving into JavaScript and hit a roadblock. At the moment, I have a very basic gallery/image application. My goal is to create a functionality where clicking on an image will lead the user to a URL stored in my model data using AJAX. Additi ...

Enhance Your Charts: Learn how to dynamically adjust zoom levels between two timestamps with just a simple form submission

I have a Zingchart Area Graph that displays events on a timeline with time on the X-Axis. I want to be able to automatically zoom into a specific timeframe on the graph based on user input from a form. For example, if a user selects a start time of 8 AM an ...

The onClick event cannot be triggered within a div that is generated dynamically

I am having an issue with a jquery code that dynamically generates a div. The problem I'm facing is that the onclick function for the anchor tag is not calling the required function. Below is the code snippet: $("#new").append(' <ul cla ...

Switch off any other currently open divs

I'm currently exploring a way to automatically close other div's when I expand one. Check out my code snippet below: $( document ).ready(function() { $( ".faq-question" ).click(function() { $(this).toggleClass('open'); $(this ...

Is there a way to upload a kml file to Google Maps using my website or by using JavaScript commands?

I have information on my website regarding gas stations, including the quality of gasoline and the GPS coordinates of each station. My concept involves incorporating Google Maps into my site, similar to how flightradar24.com displays pins indicating gas s ...

Tips for maintaining state URL persistence after a page refresh in Next.js 13 when utilizing next-usequerystate

Currently, I am using the next-usequerystate library with Next Js 13. However, I have encountered an issue where the state on the URL is lost when I refresh the page. The initial URL looks like this: localhost:3000/?page=1&genres=tree But upon refres ...

Enhancing user experience with dynamic search results: JQuery AutoComplete powered by XML

As a newcomer to AJAX, JavaScript, and the web, I'm struggling with understanding this concept. When using JQuery's autocomplete feature with a small flat file of limited items (suggestions.xml), everything works perfectly. However, when switchin ...

Looking for visible elements in WebDriverIO?

Currently, I am developing a test suite using WebDriverIO for a website with multiple duplicate elements that are selectively displayed based on user interaction... For example, the site may contain five buttons that each open a tooltip. These tooltips ar ...

Establishing the focal point and emphasis within a textarea input field

I am presenting a textarea input through PHP with the following command : print " '<textarea rows='16' cols='30'>$flist'</textarea><BR>"; I want the textarea to receive focus and automatically select the co ...

Reduce the length of the text and display it upon hovering with the mouse

I am trying to figure out how to truncate text and have it expand on mouseover in a paragraph element. I attempted to truncate the content using a specific code, but I encountered an issue. While my current code expands the content when clicking on the el ...

How to Deactivate the Default Selection in React-Select

Having trouble with the focus in a React Select dropdown. The first item always gets focused when opening the dropdown, despite passing various props without success. I checked their GitHub for related issues around autofocus but couldn't find a solut ...

What is the process for creating separate files for modal controllers?

I have an Angular application with multiple modals, and I am using AngularUI to handle the modal directive. http://angular-ui.github.io/bootstrap/ Currently, my main controllers are all located in the app.js file as routes. $routeProvider.when '/da ...

Effortless navigation through the document in both directions with seamless scrolling

To achieve a specific scrolling behavior on my webpage, I implemented the following function. Here is the code snippet: $(window).scroll(function(){ if ($(this).scrollTop() > 100) { $("html, body").animate({scrollTop: 700}, 500); re ...

Optimize Date Formatting within a React Application Using Material UI Data Grid

I am currently working with MUI Data Grid Pro and I have an issue with filtering dates in the format dd-mm-yyyy. While the dates are displayed correctly in the columns, the filtering defaults back to mm-dd-yyyy. https://i.stack.imgur.com/Ue12K.png For mo ...

Utilizing the power of Vue.js and D3.js in tandem to create dynamic force simulations

Currently, I am attempting to retrieve data from a Restful API call and utilize it to create a d3.js force simulation. However, I have encountered an issue where if I use the data from the API call directly, the simulation treats it as if there is no data ...

What is the method to implement foreach within a Vue select component?

Is there a way to utilize a Vue loop within a select box in order to achieve the following category and subcategory options layout: +news -sport -international +blog In PHP, I can accomplish this like so: @foreach($categories as $cat ...