"Displaying array objects in a select dropdown menu - a step-by-step guide

I need assistance with displaying an array object in a select tag utilizing only AngularJS. Below is the structure of my array object:

"matcherObject": {
"Percentage Off": [
  {
    "dealType": "Percentage Off",
    "subCategory": "16% to 20%",
    "recid": 2
  },
  {
    "dealType": "Percentage Off",
    "subCategory": "10 to 15 %",
    "recid": 1
  },
  {
    "dealType": "Percentage Off",
    "subCategory": "21% to 25%",
    "recid": 3
  }
],
"Special Deals based on the event": [
  {
    "dealType": "Special Deals based on the event",
    "subCategory": "Buy 1 get one entr",
    "recid": 52
  },
  {
    "dealType": "Special Deals based on the event",
    "subCategory": "Buy 1 get one entr",
    "recid": 54
  }
]
};

I am seeking guidance on how to display this object in a select tag. Below is an illustration of how it should appear in the user interface:

Upon selecting a tag, the ng-model should be displayed in the following format:

{"dealType": "Percentage Off","subCategory": "16% to 20%","recid": 2}
javascriptangularjs

Answer №1

To select an object, you should utilize ng-options. Refer to the Angular documentation for more information on ng-options.

var app = angular.module("App", []);
app.controller("Ctrl", function($scope){
$scope.reqObj =     {"matcherObject": {
"Percentage Off": [
  {
    "dealType": "Percentage Off",
    "subCategory": "16% to 20%",
    "recid": 2
  },
  {
    "dealType": "Percentage Off",
    "subCategory": "10 to 15 %",
    "recid": 1
  },
  {
    "dealType": "Percentage Off",
    "subCategory": "21% to 25%",
    "recid": 3
  }
],
"Special Deals based on the event": [
  {
    "dealType": "Special Deals based on the event",
    "subCategory": "Buy 1 get one entr",
    "recid": 52
  },
  {
    "dealType": "Special Deals based on the event",
    "subCategory": "Buy 1 get one entr",
    "recid": 54
  }
]
}
};


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="App" data-ng-controller="Ctrl">
<select data-ng-model = "selOption" data-ng-options="perc as perc.subCategory for perc in reqObj.matcherObject['Percentage Off']">
</select>

<hr />


{{ selOption | json }}
</div>

Answer №2

When dealing with nested lists, it is necessary to use ng-repeat twice and also assign the deal-type-name to a name property for display purposes.

I have made some adjustments:

$scope.matcherObject = [{
    "listName": "Discounts",
    "items": [{
      "dealType": "Percentage Off",
      "subCategory": "16% to 20%",
      "recid": 2
    }, {
      "dealType": "Percentage Off",
      "subCategory": "10 to 15 %",
      "recid": 1
    }, {
      "dealType": "Percentage Off",
      "subCategory": "21% to 25%",
      "recid": 3
    }],
  }, {
    "listName": "Event-based Deals",
    "items": [{
      "dealType": "Special Deals based on the event",
      "subCategory": "Buy 1 get one entr",
      "recid": 52
    }, {
      "dealType": "Special Deals based on the event",
      "subCategory": "Buy 1 get one entr",
      "recid": 54
    }]
  }]

HTML Output

<ul ng-repeat="listItem in matcherObject" >
  {{listItem.listName}}
    <li ng-repeat="item in listItem.items">
        {{item.subCategory}}
    </li>
</ul>

For a working example, you can visit: Plnkr

EDIT1:

The code snippet below will achieve the desired result without altering the script:

<ul ng-repeat="listItem in matcherObject">
    <li ng-repeat="item in listItem">
      <ul>
        <li ng-repeat="subItem in item">
          {{subItem.subCategory}}
        </li>
      </ul>
    </li>
</ul>

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

Expanding size on hover without affecting the alignment of surrounding elements

Imagine there are 10 divs on the page styled as squares, collectively known as the home page. Among these 10: 3 divs belong to the .event1 class, 5 divs belong to the .event2 class, and 2 divs belong to the .event3 class. <div class="boxes event1"> ...

javascriptjqueryhtmlcsscss-transforms

Utilizing the Model URL Parameter in VueJS

In the context of , my objective is to dynamically modify a range input element and reflect that change in the URL. // Incorporating URL update with range input manipulation var Hello = Vue.component('Hello', { template: ` <div> &l ...

javascriptnode.jsvue.jsvue-router

Creating an app for sending text messages and making video calls with Spring Boot technology

I am interested in developing an application with Spring Boot that allows users to make video calls and share text messages. I also want the ability to save these videos for future viewing by registered users of the app. Although I am familiar with node.j ...

javascriptjavanode.jsangularspring-boot

"Patience is key when it comes to waiting for components to render

Short Overview of the Issue I'm currently exploring methods to access an onRendered lifecycle hook. Finding on the Topic A similar query was posted here: Vue $nextTick in mounted() hook doesn't work as expected The explanation provided suggests ...

javascriptvue.jsvuejs3vue-component

Adhesive Navigation Bar

Check out this link: JSFIDDLE $('.main-menu').addClass('fixed'); Why does the fixed element flicker when the fixed class is applied? ...

javascripthtmlcss

Rearranging information within a JSON structure

Here is a sample of Javascript object and code to consider: Javascript Object { "thing":{ "data":"some data", "thumb":"some data", "data1":"some data", "data2":"some data", "data3":"some data", }, "extra1":[ ...

javascriptjson

Using Angular 5 to access a variable within a component while iterating through a loop

I am currently in the process of transferring code from an AngularJS component to an Angular 5 component. Within my code, I have stored an array of objects in a variable called productlist. In my previous controller, I initialized another empty array nam ...

javascriptangulartypescriptangular-components

One file successfully imports a dependency, while the other file does not seem to recognize it

I'm diving into the world of Vuex, exploring how to create an auth module. I came across some examples that I'm trying to implement, but I've hit a roadblock when attempting to use axios in my store. My store is structured with separate file ...

javascriptvue.jsaxiosvuex

Creating custom shaders in three.js that can receive shadows involves a few key steps. Let

For more information, you can visit the original post here. The task at hand seems to be quite complex due to the lack of documentation and examples on this specific topic on the three.js website. Currently, I am able to render the correct image and, with ...

javascriptthree.js

Icons from Material Design Lite are not appearing as expected when integrated into an Angular project

Recently, I integrated MDL into my Angular project. While most of it is functioning properly, the MDL icons seem to be giving me trouble... I've implemented them using <i class="material-icons">share</i>, but instead of displaying as an i ...

cssangularjsmaterial-design

Extract the year from a string formatted as 1880-01-01T00:00:00.000

Looking to extract the year from an array of dates with format 1880-01-01T00:00:00.000. What's the most efficient method to accomplish this using JavaScript? ...

javascriptjson

Attempting to create a conditional state in Redux based on data fetched from an API

I'm currently exploring the most effective way to set up a conditional modal popup based on whether the response from an API call is null or not. While I typically work with functional components, the component I'm working with here is built as a ...

javascriptreactjsreduxcomponentsstate

Add the file retrieved from Firestore to an array using JavaScript

Trying to push an array retrieved from firestore, but encountering issues where the array appears undefined. Here is the code snippet in question: const temp = []; const reference = firestore.collection("users").doc(user?.uid); firestore .collec ...

javascriptreactjsfirebasegoogle-cloud-firestorenext.js

Having trouble with AutoCompleteExtender OnClientItemSelected not functioning in IE8 but working perfectly in IE9? Let's dive into the JavaScript substring

My AutoCompleteExtender is connected to a web service and works perfectly. The Target TextBox (tb_provider1) has autocomplete capabilities thanks to the GetProviders function. What I want to achieve is triggering a javascript function when a user selects a ...

javascriptasp.netinternet-explorer-8substringautocompleteextender

Invoking a greasemonkey script when a user interacts with a button

For a script I wrote, I added an extra column and link in each row. However, the issue is that I want the links to trigger a function in my greasemonkey script and pass a variable to it. I have learned that because greasemonkey operates in a sandbox, achi ...

javascriptgreasemonkey

I keep encountering a parse error when trying to parse JSON that contains a numerical key

After receiving data in JSON format from a Java application, I encountered a parse error when the key was of type Long: 1: { "CONGESTION": 1, "ANSWER": 7 } However, after changing the key to a String as shown below: "1": { ...

javajavascriptjsonparsing

Centralize the storage of domain within an AngularJS service

In my Angular service, I have the following method: function send(data) { return $http({ method: 'POST', url: 'https://test.domain/test/send', data: $httpParamSerializerJQLike(data) ...

angularjs

Calculate the number of arrays in an object and then substitute them

Currently, I have an object that is returning the following data: Object {1: 0, 2: Array[2], 3: 0, 4: 0, 5: 0, 6: 0, 7: 0, 8: 0, 9: 0, 10: 0, 11: 0, 12: 0} My goal is to replace the "Array[2]" with just the number "2" (indicating how many records are in ...

javascriptarraysangularjsobject

Creating a chat interface with chat bubbles in React JS can be done by implementing components such as Message

Having some JSON data stored in dummyData, I am seeking guidance on how to position chat bubbles on the left and right based on the direction. My framework of choice is Material UI along with the context API. The attached image serves as a visual reference ...

javascriptcssreactjsmaterial-uijsx

The Protractor Custom Locator is experiencing difficulty in finding the element

For our project, the automation team is incorporating a custom attribute called 'lid' to elements where unique identification is challenging. A new custom locator method has been developed to find elements using the 'lid' attribute: ...

javascriptselenium-webdriverprotractor