AngularJS facing difficulty in resolving the returned promise

I am facing an issue with two cascading drop-downs where the JSON data being returned to the second drop-down is not rendering properly due to a promise resolution problem

 <div class="row" style="padding-bottom:50px;width:85%;">
    <select data-ng-model="search.astate"  data-ng-options="s.StateID as s.StateName for s in astates" ng-change="agetLGA()">
          <option value="">Filter by state</option>
       </select>
   </div>
    <div class="row" style="width:85%;">
    <select data-ng-model="search.algovt"  data-ng-options="c.StateLGId as c.LGName for c in algovts" data-ng-disabled="!lgovts">
          <option value="">Filter by local govt</option>
       </select>
   </div>

This is the code that triggers on the change of the first drop-down

$scope.agetLGA = function () {
        var stateId = $scope.search.astate;
        $scope.algovts = artFact.getLGA().save({stateId:stateId}, function (response){
            $scope.algovts = response.data;
        });

This is the definition of the getLGA factory

 getLGA: function (stateId) {
            return $resource('/Home/GetLGA/', { stateId: '@stateId' }, { update: { method: 'POST' } });

    }

Encountering the following error:

Error: [$resource:badcfg] object
http://errors.angularjs.org/1.2.13/$resource/badcfg?p0=array
    at http://localhost:53536/Scripts/angular.js:78:12
    at a.module.factory.f.(anonymous function).p.then.m.$resolved (http://localhost:53536/Scripts/angular-resource.min.js:8:517)
    at deferred.promise.then.wrappedCallback (http://localhost:53536/Scripts/angular.js:11033:81)
    at deferred.promise.then.wrappedCallback (http://localhost:53536/Scripts/angular.js:11033:81)
    at http://localhost:53536/Scripts/angular.js:11119:26
    at Scope.$get.Scope.$eval (http://localhost:53536/Scripts/angular.js:12045:28)
    at Scope.$get.Scope.$digest (http://localhost:53536/Scripts/angular.js:11871:31)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$digest (<anonymous>:844:31)
    at Scope.$get.Scope.$apply (http://localhost:53536/Scripts/angular.js:12151:24)
    at Scope.ng.config.$provide.decorator.$delegate.__proto__.$apply (<anonymous>:855:30)

Seeking assistance to resolve this issue as I have exhausted all possible solutions

javascriptangularjs

Answer №1

If you're creating a Factory, consider implementing the following:

return {
    getLocalGovernmentArea: $resource('/Home/GetLGA/', {}, { update: { method: 'POST' } });
}

Within your controller, you can then use the following code:

$scope.retrieveLGA = function () {
    var stateId = $scope.search.state;
    $scope.localGovts = customFactory.getLocalGovernmentArea.update({stateId: stateId}, function (response){
        $scope.localGovts = response.data;
    }));
};

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

Ways to turn off hover highlighting

Is there a way to disable the highlighting effect of the <select> element in HTML? When you hover over items in the dropdown list, a blue color strip moves with your mouse. I need to find a way to get rid of this effect. Here is an example of the c ...

javascripthtmlcssdrop-down-menu

Tips for saving ajax data in a line

I need to showcase data fetched from my database using jQuery.ajax() regularly, with each data entry having a title and description. To achieve this, I plan on utilizing setInterval(func, 5000). What I require is a JavaScript container (could be an array ...

javascriptajaxjquery

How can I change the text of a single button by clicking on it without affecting the other buttons that share the same

Currently, I am implementing a posting system where posts can be added using a button. The posts have two additional buttons - one to show/hide content and the other to delete content. I am utilizing jQuery's slideToggle event to toggle the visibility ...

javascriptjqueryhtmlcssbootstrap-4

What is the method for obtaining the entire object as a response following a click?

I am working on a basic JavaScript snippet: var image = [{name: "Breakfast", age: 100, author: "Alice"},{name: "Dinner", age: 10, author: "Teddy"}]; function gallery(name, content) { this.name = name; this.c ...

javascriptjqueryjquery-events

Angular 2 Update RC5: Router Provider Not Found

I'm encountering an issue with the latest Angular 2 RC5 router (router version is RC1). Below is the error log from the dev console: EXCEPTION: Error in /templates/app.component.html:2:0 ORIGINAL EXCEPTION: No provider for Router! This is how my ap ...

javascriptangularjstypescriptroutes

Error message: "Named export cannot be identified"

My file structure looks like this: routes auth login index.js Login.jsx routes.js Within the routes.js file, I have the following code snippet: import { Route } from 'react-router-dom'; import { Login } from './login ...

javascriptreactjsecmascript-6import

eliminate currency match regular expression

Currently, I've implemented this regular expression to validate dollar amount inputs. parsley-regexp="^\$?[0-9][0-9\,]*(\.\d{1,2})?$|^\$?[\.]([\d][\d]?)$" I am now looking to modify the validation so that onl ...

javascriptphpregex

how can I locate and interact with nested elements using WebDriver in Java

In the HTML code provided below, I am trying to click on the cssselector (span.icon_edit ClsUpdate) within the span tag. <div class="final_textarea"> <div class="tab_lable_right"> <textarea rows="2" cols="50" id="txttab_2" readonly= ...

javascriptjqueryseleniumselenium-webdriverwebdriver

Creating Outer Glow Effect on a Plane Primitive with THREEJS

Seeking guidance on creating a glow effect for a plane primitive in THREEJS. Found examples for cubes and spheres, but those involve encasing the object inside another transparent material, which is not suitable for my needs. The desired glow effect shoul ...

javascript3dthree.jsshaderglow

What is the method for setting a default value for a disabled input?

<input type="checkbox" disabled="disabled" checked="checked" name="is_ok" id="id_is_ok"/> Is there a way to set a default value for this disabled input? I've noticed that if this field is disabled and I make edits to my data, the changes are n ...

javascripthtml

I'm looking for the best way to display an error message in HTML using a custom validation directive that I'm creating

<!DOCTYPE html> <html><!--starting of html--> <script src="angular.js"></script> <body ng-app="myApp"> <p>Feel free to type in the input field:</p> <form name="myForm"> <input name="myInput" type=" ...

htmlangularjsnode.js

What is the best way to send pg-promise's result back to the controller in Express?

While working with Ruby on Rails (RoR), I am familiar with the MVC (Model-View-Controller) concept. In this framework, the controller is responsible for receiving data from the model, processing it, and rendering the view. An example of this structure look ...

javascriptpostgresqlexpresspromisepg-promise

Encountered an error with the opcode during deployment of migrations

Encountering an error while running the truffle migration command, despite trying several solutions without success. PS C:\Users\Jatin\OneDrive - nsut.ac.in\Desktop\Truffle\web> truffle migration Compiling your contracts... ...

javascriptsolidityweb3jstruffleopcode

"Optimizing the Placement of jPlayer for Your Website

Struggling to properly position jPlayer on my webpage. After consulting jPlayer's documentation, I learned that it is supposed to be absolutely positioned by default. However, it seems to be flowing with the rest of the page content rather than being ...

javascriptjqueryhtmljplayer

Storing knockout view model data in a database and fetching it back

I am currently working on a web form that utilizes knockout, and I need to add a new feature that allows users to save the form as a draft in the database. Later on, they should be able to load it again to make modifications or submit it. Is there a built ...

javascriptjsonmvvmknockout.js

Conceal an absolutely positioned element outside its relatively positioned parent

I have a relative position parent element, <div style="position:relative" id="a"> and within that div, I'm creating some absolute positioned elements using jQuery, <div style="position:absolute;right:0" id="b"> These elements are anima ...

javascriptjqueryhtmlcss

issue with displaying popover component using React with Material UI

A React component I created has 6 different experiences, each triggering a popover with an array of images. The popovers are implemented using Material UI, and while they work, there are some console errors that I'm unsure how to resolve. Below is th ...

javascriptreactjsmaterial-ui

Ensure the calling object is retained during the resolution of an Angular promise

Identifying the Issue One issue arises when resolving promises in Javascript: the context switches to Window #. This means that referring back to the object resolving the promise becomes tricky because I can't access or modify its variables. The com ...

javascriptangularjsangular-promise

Send the function to the directive

Below is the code for a directive: module app.directives { interface IDmDeleteIconController { doAction(): void; } class DmDeleteIconController implements IDmDeleteIconController { static $inject = ['$scope']; ...

angularjstypescript

Element cannot be located following the addition of a className in the HTML document

When manually adding id, test-id or classname in an HTML file, it's important to note that Cypress may have trouble finding the element. For example, I have included 'Classname' here just for demonstration purposes. https://i.stack.imgur.co ...

javascriptcss-selectorscypress