Using AngularJS with Spring MVC and @RequestParam

As a newcomer to AngularJS, I have a Spring controller that retrieves an object from the database based on its id. I want to pass this id using @RequestParam in AngularJS. However, when attempting to do so, I encountered the following error message: "Error: id is not defined". Here is the code snippet that resulted in the error:

Spring MVC Controller

@RequestMapping(value = "/rest/chartConfigs/getById",
    method = RequestMethod.GET,
    produces = MediaType.APPLICATION_JSON_VALUE)
@RolesAllowed(AuthoritiesConstants.ADMIN)
public ChartConfigs findOne(@RequestParam(value = "id") Integer id) {
    System.out.println(chartConfigService.getOne(id));
    return chartConfigService.getOne(id);
}

AngularJS Service

myappApp.factory('ChartConfigService', function ($http) {
    return {
        findOne: function() {
            var promise = $http.get('app/rest/chartConfigs/getById',{params: {id: id}}).
                then(function  (response) {
                    return response.data;
                });
            return promise;
        }
    }
});

AngularJS Controller

myappApp.controller('ChartConfigController', function ($scope, ChartConfigService) {
    $scope.findOne= function() {
        ChartConfigService.findOne($scope.id).then(function(obj) {
            $scope.message=obj;
            console.log(obj.type);
        });
    };      
});

HTML Page

<input ng-model="id" ng-change="findOne()" required>

Answer №1

Make sure to include the necessary ID parameter when calling the findOne function:

findOne: function(id) {
        var promise = $http.get('app/rest/chartConfigs/getById',{params: {'id': id}}).
                        then(function  (response) {
            return response.data;
        });
        return promise;
    }

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

Fetching the second item within an object using JavaScript

I am trying to retrieve the data from the last month of an API, but I want to avoid hard-coding the date like this: const data = [data.data['Monthly Time Series']['2021-11-30']]. I need a way to dynamically access the 2nd object without ...

Ways to retrieve parameters in getStaticPaths function?

I'm currently working on a Next.js app with Contentful as the CMS. The file structure relevant to my question is: pages -[category] -[slug].js My goal is to access the category value when a user visits category/slug. Currently, I have the category ...

Retrieve the CSS class definition using the console in the Chrome Developer Tools

Is there a way to automatedly extract CSS class definitions from Chrome Developer Tools? I want to retrieve the styles defined in a specific class name, similar to how it is displayed in the Styles tab on the right-hand side. I know about the getComputedS ...

Generating a tree structure using a JavaScript array

Looking to build a tree structure from a given list of data where the paths are represented like: A-->B-->C-->D-->E.. A-->B-->C-->D-->F.. A-->F-->C-->D-->E.. . . . All possible data paths are stored in an array. The de ...

Is there a way to track when the Angular DTOptionsBuilder ajax call is complete and trigger a callback function?

Working with angular datatables, I have the following code: beforeSend:</p> success callback causes the table on the page not to populate with the data. How can I implement a callback that triggers once the ajax is done without interfering with the ...

Unleashing the power of Sinon: a guide to covertly observing the e

I need to verify if the method "res.render" is invoked with the correct parameters. it("Checks if the page for creating a new user is rendered", done => { const spy = sinon.spy(ejs, "render"); chai .request(app) .get("/users/create ...

There is an issue with Onsen-UI not being able to load <ons> tags when used in Meteor

I'm attempting to integrate avatars from the Onsen UI pattern list () into a Meteor app, but the <img> tags are not loading. Firebug shows a message from Onsen: Onsen UI requires jqLite. Load jQuery after AngularJS to resolve this error. Addi ...

Modal's ng-click not triggering component's function

I am currently working on resolving an issue. My choice to use AngularJS is intentional, as I prefer not to load the entire NPM of Angular. Additionally, we heavily rely on Razor Syntax for the Web Layer. Implementation in Create.cshtml file <button ...

Apply a specific CSS class to a division depending on the currently active cookie

I have implemented cookies on specific pages using https://github.com/carhartl/jquery-cookie. Could someone guide me on how to apply a CSS class to an ID (e.g., adding class .red to #mouse if the cookie named "socks" is active)? For example: If there is ...

Troubleshooting jQuery masonry problem related to initial display and height settings

Within a div, there is a masonry container with the inline style property display:none. With several divs on the page, clicking their respective buttons during load causes them to switch like a slideshow. This disrupts masonry's ability to calculate t ...

Ways to simulate a class instance that is being received from a file with a different class instance

I am struggling with a specific file in my project // src/history import { createBrowserHistory } from 'history' const history = createBrowserHistory(); export default history; The variable history represents an instance of the BrowserHistory cl ...

eliminating labels from a string through recursive method

One of my challenges involves developing a function that can remove tags from an input string. For example: '<strong>hello <em>my name <strong>is</strong> </em></strong>' The desired result should be: &apos ...

Events triggered when the mouse hovers over an element and then moves

After spending hours reading articles and watching YouTube videos, I am completely lost. No matter what code I try, it seems like I can never get it right. It's frustrating how such a simple task can be so confusing. I just can't seem to wrap my ...

What is the standard text displayed in a textarea using jQuery by default

My goal is to display default text in a textarea upon page load. When the user clicks on the textarea, I want the default text to disappear. If the user clicks into the textarea without typing anything and then clicks out of it, I'd like the default t ...

Efficiently organizing reducers into separate files in ReactJS and merging them together

My App is a simple counter app where buttons are images with their own counters. https://i.stack.imgur.com/qkjoi.png In my App.js file, I imported the reducer for the counters using the following code: import reducer from './reducers/reducerCounter&a ...

Is it possible to include a visible comment in an ajax call that can be viewed in Fiddler when analyzing the outgoing data?

Here is an example of the code I am working with: $.ajax({ cache: false, url: "/xx" }).done(onAjaxDone).fail(function (jqXHR, textStatus, errorThrown) { Dialog.Alerts.ajaxOnFailure(jqXHR, textStatus, err ...

Calculating the difference between the old scrolltop and the new scrolltop in jQuery/Javascript

I have a seemingly straightforward question, yet I am struggling to find a solution. Each time a user scrolls, the scrollTop value changes. I want to subtract the previous value from the new value of the scrollTop. However, I am unsure how to store the old ...

Validation for dates in Angular.Js input is important to ensure that only

Take a look at this form: <form name="user_submission" novalidate="novalidate" method="post"> <input type="date" name="date_of_birth" ng-focus="save_data()" ng-model-options="{timezone: 'UTC'}" ng-pattern="/^(19\d{2}|[2-9]& ...

React is encountering a problem with loading the image source and it is

<img src="play.jpg" alt="play"></img> This code works fine in standard HTML, but I'm having trouble getting it to work in React. Is adding it as a background the only solution? ...

Checking the existence of a user's email in Node.js

Hey there! I am new here and currently learning Node.js with Express. I'm trying to find a way to check if a user's email already exists in the database. Here is what I have so far: const emailExists = user.findOne({ email: req.body.email }); if ...