The ng-option fails to function properly when the option list is retrieved from the $http service

I have this code in my controller that retrieves a list of offers from a service:

 mosServiceFactory.allOffers().then(function (response) {
            $scope.Offers = response.data.offers;
            console.log(JSON.stringify($scope.Offers));
 });

In my HTML, I use the following code to display the list of options in a select tag:

<select ng-model="offerList" ng-option="offer.campaignName for offer in Offers"></select>

The JSON response I receive in the service ($scope.Offers) looks like this:

[{
        "offerId": "8a1b0cb44e76781e014e767e7b120001",
        "campaignName": "Instant July Offer",
        "campaignDescription": "30% discount on Apple",
        "campaignStartDate": "2015-07-12",
        "campaignEndDate": "2015-07-22",
        "status": "ACTIVE",
        "enrollmentId": "8a1b0cb44e66dba9014e670a0f8c0001",
        "discount": "30",
        "discountUnit": "Discount %",
        "dateCreated": "2015-07-10",
        "dateModified": null,
        "instantOffId": 1,
        "basketOfferItemId": null,
        "basketOfferQuantity": 0,
        "basketQuantity": 0
    }, {
        "offerId": "8a6804c24e53e4ab014e53fe72770000",
        "campaignName": "July2",
        "campaignDescription": "Weekend Offer from first 100 customers.",
        "campaignStartDate": "2015-07-08",
        "campaignEndDate": "2015-07-11",
        "status": "EXPIRED",
        "enrollmentId": "8a1b0cb44e4e8e2b014e53333d5d0001",
        "discount": "20",
        "discountUnit": "Discount $",
        "dateCreated": "2015-07-03",
        "dateModified": null,
        "instantOffId": 0,
        "basketOfferItemId": null,
        "basketOfferQuantity": 0,
        "basketQuantity": 0
    }, {
        "offerId": "8a1b0cb44e61e491014e622088460003",
        "campaignName": "Weekend discount",
        "campaignDescription": "50% discount",
        "campaignStartDate": "2015-07-06",
        "campaignEndDate": "2015-07-07",
        "status": "INACTIVE",
        "enrollmentId": "8a1b0cb44e61e491014e6207fbaa0001",
        "discount": "50",
        "discountUnit": "Discount %",
        "dateCreated": "2015-07-06",
        "dateModified": "2015-07-06",
        "instantOffId": 0,
        "basketOfferItemId": null,
        "basketOfferQuantity": 0,
        "basketQuantity": 0
    }, {
        "offerId": "8a1b0cb44e766cd5014e766ed37b0000",
        "campaignName": "abc offer",
        "campaignDescription": "50% discount on Apple",
        "campaignStartDate": "2015-07-12",
        "campaignEndDate": "2015-07-17",
        "status": "ACTIVE",
        "enrollmentId": "8a1b0cb44e61e491014e6207fbaa0001",
        "discount": "50",
        "discountUnit": "Discount %",
        "dateCreated": "2015-07-10",
        "dateModified": null,
        "instantOffId": 1,
        "basketOfferItemId": null,
        "basketOfferQuantity": 0,
        "basketQuantity": 0
    }]

This scenario is similar to the one shown in this plunker http://plnkr.co/edit/fMAGnonoM9JvuIKvnOYU?p=preview, the only difference being that I am receiving a list in the response.

Despite everything seeming correct, I'm unable to see the options in my HTML file!

javascriptangularjsng-options

Answer №1

The correct choice is ng-options, not ng-option

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

Unit testing with Jest involves creating mock implementations of IF conditions within functions to ensure complete code coverage

Currently, I am working with an API script stored in a file. const ApiCall = { fetchData: async (url) => { const result = await fetch(url); if (!result.ok) { const body = await result.text(); // uncovered line throw new Error(`Err ...

javascriptreactjsjestjsenzyme

Solve problems with limitations on ng2-dnd drop zones

I successfully integrated drag and drop capabilities into my Angular 4 application using the ng2-dnd library. Within my application, I have containers that can be sorted, as well as individual items within each container that can also be sorted. My goal i ...

javascriptangulardrag-and-dropdrag

What causes a component to not update when it is connected to an Array using v-model?

Array1 https://i.stack.imgur.com/cY0XR.jpg Array are both connected to the same Array variable using v-model. However, when changes are made to Array1, Array2 does not update. Why is this happening? Process: Upon examining the logs, it can be observed th ...

javascriptvuejs2vue-componentvue.js

Implement Clip Function with Gradient Effect in JavaScript on Canvas

Trying to incorporate the clip() function within the canvas element to create a unique effect, similar to the one shown in the image. I have successfully achieved a circular clip, but I am now aiming for a gradient effect as seen in the example. How can th ...

javascripthtmlcanvas

When I try to alter HTML using JS, I encounter an undefined error related to AngularJS

Using this specific function: function adjustContent(elemento){ if (document.getElementById(elemento).innerHTML.indexOf('&#10004;')>0){ document.getElementById(elemento).innerHTML=document.getElementById(eleme ...

javascripthtmlangularjs

Exploring the compatibility of Husky with Typicode using Yarn

Currently, I have implemented the use of husky to configure git hooks for prettier. However, I am facing a persistent issue whenever I attempt to commit or push: > husky - Can't find npm in PATH. Skipping precommit script in package.json My curre ...

javascriptnode.jsnpmyarnpkgprettier

chaotic telerik editor arrangement

I have incorporated the Rad Editor into my ASP.NET page. <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadEditor ID="reSummery" runat="server" > </telerik:RadEditor> Despite not referencing ...

javascriptasp.netcsstelerikstyles

Conceptualization of a Strategy Game Server

Recently, I've been brainstorming the idea of developing a WebGL-based real-time strategy game that allows multiple players to join and play together. My plan is to utilize Node.js for creating the game server, along with websockets to establish real- ...

javascriptnode.jswebsocketwebgl

A guide on changing a class dynamically in a Vuejs component by utilizing a variable from Laravel

I have been struggling with this issue and attempted multiple times to find a solution. My goal is to toggle an id using Vuejs based on a boolean value passed from Laravel. I initially achieved this without components, but encountered a problem where updat ...

javascriptlaravelvue.jsvuejs2

When attempting to retrieve information using the findById(''), the process became frozen

When attempting to retrieve data using findById(), I'm encountering a problem. If I provide a correct ObjectID, the data is returned successfully. However, if I use an invalid ObjectID or an empty string, it gets stuck. If findById() is called with a ...

javascriptnode.jsmongodbmongoose

Monitoring changes in session storage with AngularJS

In the sessionStorga, I have stored data from various controllers using a library called https://github.com/fredricrylander/angular-webstorage. The data is being successfully stored and is accessible within the current session. However, I am encountering a ...

javascriptnode.jsangularjssession-storageweb-storage

Disable the click event using jQuery

$("button").click(function (){ $("<button>Start</button>).appendTo('main'); }); The code above introduces a functionality where clicking a button generates another button dynamically. However, each subsequent click kee ...

javascripthtmljqueryclick

Is it possible to switch from kilometers to miles on the distance matrix service in Google Maps?

let distanceService = new google.maps.DistanceMatrixService(); distanceService.getDistanceMatrix({ origins: [sourceLocation], destinations: [destinationLocation], travelMode: google.maps.TravelMode.DRIVING, unitSystem: google.maps.UnitSystem.IMPERI ...

javascriptgoogle-mapsgoogle-maps-api-3

Utilizing React Material UI for form validation with error handling and informative helper text

I recently created a form in which I needed to validate the inputs. During my research, I came across the material UI library that has an attribute called error boolean, and another attribute called helperText for the TextField input of the form. However ...

javascriptreactjsformsecmascript-6material-ui

Implementing end-to-end encryption in a React.js and Express.js application

I'm not certain if this question has been raised previously. However, I haven't come across it so far. I have developed a REST API using Express.js. This API is integrated with a React.js web application. The REST API is protected by JWT authent ...

javascriptnode.jsreactjsangularjsexpress

Explain the significance of the symbols $$ and $ in the context of webdriver, and provide instructions on integrating them into

According to the webdriver documentation, using the $ and $$ functions in WebdriverIO can provide shortcuts for moving deeper into the DOM tree without relying on complex xPath selectors. Currently, I am working on writing a cucumber test for my Reactjs a ...

javascriptseleniumselenium-webdriverwebdrivercucumber

What is the extent of an object within a JavaScript Array?

Exploring scopes in JavaScript has led me to an interesting discovery when calling functions from an array. In the example below, I experiment with three different scopes: one bound to an Object named foobar, one bound to window, and a third one which po ...

javascript

extracting the HTML content from JavaScript and saving it into a standalone file

update When I click a link, a popup opens and I see all this HTML. The smile method is called when I click the link, and we append HTML in that method so that we can see it when the popup is opened. I moved it to a separate file something.component.html, ...

javascriptjqueryhtmlangularjstypescript

What is the best way to fill a "multiselect" element with information from a JSON object?

I'm struggling to populate the multiselect field with data from a JSON object. No matter which multiselect I use, the data shows in inspect mode but not on the frontend. It was supposed to look like this. https://i.sstatic.net/FVz2H.png but it comes ...

javascriptbootstrap-4multi-selectbootstrap-multiselect

Outputting data to a WriteStream within an Event Listener

My current issue involves an EventEmitter object set up to listen for events and write information to a file when the event is emitted. Using fs.createWriteStream(path, { flags: 'a'});, I have opened a FileStream. However, emitting events quickly ...

javascriptnode.jsevent-handling