Issue with ng-change function causing data not to load properly

I have added a

data-ng-change='getSubjectsClasswise(classBean.class_id);'
in the class <select> tag, but for some reason the subjects are not loading in the subject <select> tag.

I have checked everything and it all seems fine, but I can't figure out what the issue is. Can someone please help me with this?

JSP:

<div data-ng-controller='ChapterController'>
<form class="form-horizontal">
    <div class="form-group">
        <label class="control-label col-sm-3">Select Class * :</label>
        <div class="col-sm-8">
            <div class="col-sm-6">
                <select data-ng-model='classBean.class_id' data-ng-change='getSubjectsClasswise(classBean.class_id);'  class="form-control" name='stdClass' required>
                    <option value="">--SELECT--</option>
                    <option data-ng-repeat='c in clss' value="{{ c.class_id}}">{{ c.class_name}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="form-group">
        <label class="control-label col-sm-3">Select Subject * :</label>
        <div class="col-sm-8">
            <div class="col-sm-6">
                <select data-ng-model='sid' class="form-control" required>
                    <option value="">--SELECT--</option>
                    <option data-ng-repeat='s in subss' value="{{ s.sid}}">{{ s.subject_name}}</option>
                </select>
            </div>
        </div>
    </div>
    <div class="btn-right">
        <button type="submit" value="Register" class="btn btn-primary">Register</button>
    </div>
</form>

JS Controller:

'use strict';
var app = angular.module("CareerTurn");
app.controller('ChapterController', function($scope, $http, $location, $window, AdminService) {

getClasses();

function getClasses() {
    $http({
        method : 'GET',
        url : 'http://localhost:8015/CareerTurn/adm/getClasses.do'
    }).then(function successCallback(response) {
        $scope.clss = response.data;
    }, function errorCallback(response) {
        console.log(response.statusText);
    });
}

$scope.getSubjectsClasswise = function(class_id) {
    alert(class_id);
    var URL ='http://localhost:8015/CareerTurn/adm/getClasswiseSubjects.do';
    $http.post(URL,class_id).success(function(response){
        $scope.subss = response.data;
    }).error(function(reponse){
        alert('error');
    });
}   

});

Java Controller:

@RequestMapping(value="/getClasswiseSubjects.do", method=RequestMethod.POST)
public @ResponseBody List<SubjectBean> getClasswiseSubjects(@RequestBody int class_ids) {
    return getAdminService().getClasswiseSubjects(class_ids);
}

@RequestMapping(value="/getClasses.do", method=RequestMethod.GET)
public List<ClassBean> getClasses() {
    return getAdminService().getClasses();
}

DaoImpl:

@Override
public List<ClassBean> getClasses() {
    try{
        String sql="from ClassBean";
        query = em.createQuery(sql);
        return query.getResultList();
    }catch(Exception ex){
        ex.printStackTrace();
    }
    return null;
}

@Override
public List<SubjectBean> getClasswiseSubjects(int class_id) {
    try{
        query = em.createQuery("from SubjectBean sb where sb.classBean.class_id=:class_id");
        query.setParameter("class_id", class_id);
        List<SubjectBean> subs = query.getResultList();
        return subs;
    }catch(Exception ex){
        ex.printStackTrace();
    }
    return null;
}

Console:

Hibernate: select classbean0_.class_id as class1_1_, classbean0_.class_createdate as class2_1_, classbean0_.class_createdby as class3_1_, classbean0_.class_name as class4_1_ from exam_class classbean0_
Hibernate: select subjectbea0_.sid as sid26_, subjectbea0_.class_id as class6_26_, subjectbea0_.subject_code as subject2_26_, subjectbea0_.subject_createdate as subject3_26_, subjectbea0_.subject_createdby as subject4_26_, subjectbea0_.subject_name as subject5_26_ from subjects_tbl subjectbea0_ where subjectbea0_.class_id=?

Answer №1

modify response.data to simply use response

.then(function(response){
        $scope.subss = response;
    }).catch(function(reponse){
        alert('error');
    });

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

Strategies for resolving duplicate jQuery code in my project

Trying to simplify my jQuery code that handles video selection and playback functionality. Users can click on a thumbnail or button to play a specific video, with the title of the video changing accordingly. Despite achieving the desired outcome, the cur ...

How come the <script> element is showing up in the <body> tag even though I initially declared it outside the <body>

I'm currently working on web projects through the Odin Project and I want to follow the software engineering process by taking small steps and testing them. Specifically, I'm interested in seeing the output of document.querySelector("body"). I kn ...

Assistance needed to integrate vaccine center data with the administration, MongoDB, and MEAN stack project

Hey there, I'm a beginner in developing a MEAN stack project. Currently, I am facing an issue with two collections: one for users who are admins and another for healthcare centers providing vaccines. My task involves registering an admin to a healthca ...

The DELETE function in express.js with MySQL integration is encountering a problem where it is unable to

As I work on setting up my website, the backend utilizes express.js to send queries to a MySQL Database. However, when attempting to delete rows, no action seems to take place. function establishConnection() { return mysql.createConnection({ multipl ...

How can I change the colors of points on a 3D scatter plot using Three.js as I zoom in?

Seeking assistance with a project involving displaying a 3D point cloud containing approximately 200K points, akin to the image provided below, complete with a colorbar. https://i.sstatic.net/L6ho0.png We are looking to dynamically update the colorbar wh ...

Angular 14 - Issue with passing values through props - Error: Uncaught (in promise): InvalidCharacterError occurs when attempting to set attribute with 'setAttribute' method

I am a beginner with Angular and encountering an issue when trying to pass props from a parent component to a child component. The specific error I am facing is related to an invalid attribute name while using Angular version 14.2.5. core.mjs:7635 ERROR ...

Assigning an identification to a descendant of an element that is currently being displayed

Is there a way to use jQuery to add #cat to the visible .horse's child element with class .dog? <div id="tabs-1" class="horse" style="margin-right: 20px; display: none;"> <div style="width:70%; margin: 0 auto; margin-top:-20px"> ...

Search input in Handsontable header periodically clears when scrolling

Encountering a problem with preserving search terms in text input fields within HoT headers. After entering a search term and scrolling down, the term often gets cleared. This issue seems to be linked to the freeze behavior of HoT headers during scrolling. ...

Ordering the source files for the Grunt index task using globbing

Currently, I am utilizing VS2015 along with a grunt task in order to gather all the java-script files within my project and then insert them into my template index.html before executing the build. The issue that arises is the dependency order of these file ...

Unlimited Angular Digest Loop Caused by promise.then()

The issue: The usage of this.promise.then(function(){}) function within a controller method appears to lead to an infinite digest loop on $rootScope, even though the returned value remains constant. It should be noted that removing the .then() line elimina ...

Utilizing regular expressions to search through a .md file in JavaScript/TS and returning null

I am currently using fs in JavaScript to read through a changelog.MD file. Here is the code snippet: const readFile = async (fileName: string) => { return promisify(fs.readFile)(filePath, 'utf8'); } Now I am reading my .md file with this fu ...

Break down the object into more manageable sections

How can I separate the properties of the object returned from the results? Every time I try, I just end up with undefined. Do you have any suggestions? app.get('/bets/:id', function(req, res){ var id = req.params.id; function(err, resu ...

I'm receiving identical results from findOne even when using different IDs

I am currently working on creating a new array of products based on a list of different Ids. However, I have encountered an issue where the same product is being returned for all Ids when using the findOne() method. let wishpro = ['632a5e5rtybdaaf ...

Can the console logs be disabled in "Fast Refresh" in NextJS?

When I'm running multiple tests, my browser's console gets cluttered with messages every time a file is saved. Is there a way to disable this feature? For example: [Fast Refresh] completed in 93ms hot-dev-client.js?1600:159 [Fast Refresh] rebuil ...

Access the JavaScript array within a click function by dynamically generating the array name

Here's a scenario where I have an array like this: var first_array = ['foo','bar','foobar']; My goal is to run a click function that retrieves the array's name and iterates through its elements. The array has an ID ...

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

What is the process for setting up basic http authorization using angular.js?

My backend setup follows a structure similar to what is explained in this article. I am looking to make a GET request using angular.js, just like curl does it, with authorization via HTTP headers: $ curl -u miguel:python -i -X GET http://127.0.0.1:5000/a ...

Challenges with optimization in AngularJS and Angular Material

Currently, I am working on an AngularJS application that utilizes 7 Angular Material tabs. One issue I have encountered is a significant amount of animation lag when switching tabs or opening a md-select element. According to Chrome Developer Tools, the fr ...

Error message: The 'node_modules' directory is not found after installing

During class today, I faced a problem. I was demonstrating to my students how to install and use gulp.js using a projector. I successfully installed node.js and gulp.js globally with npm install -g gulp without any issues. However, when attempting to ins ...

Vuejs method to showcase input fields based on form names

I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input. Form 1 includes: Name Surname Email with a form name attribute value of form_1 Form 2 i ...