Avoid repeating the same options in a dropdown menu

Question

Avoid repeating the same options in a dropdown menu

Here is the HTML code I am working with:

<div layout="row" layout-align="center center">
            <md-select placeholder="Property type" ng-model="id" md-on-open="loadProperties()" style="min-width: 200px; padding: 20px;">
                <md-option ng-value="id" ng-repeat="id in list" >{{id.propertyType}}</md-option>
            </md-select>
</div>

This code fetches data using Angular from the following JSON:

    {
  "properties": [
    {
      "propertyId": "5702581e3678da025f79c83d",
      "price": 493967,
      "mainImg": "//loremflickr.com/668/501/house,facade",
      "images": [
        {
          "thumbUrl": "//loremflickr.com/372/279/property,interior",
          "mainUrl": "//loremflickr.com/668/501/property,interior"
        },
        ...
      ],
      "beds": 6,
      "propertyType": "Terraced House",
      "propertyAddress": "628 Arlington Avenue, Jardine, California, 2444",
      "description": "Fugiat voluptate sunt deserunt sit tempor culpa.... aute qui. Nulla adipisicing officia sunt incididunt cillum qui exercitation officia labore esse minim. Enim occaecat mollit amet laboris id excepteur elit mollit ex tempor exercitation duis.\r\n"
    }

The JSON contains various properties with unique propertyIDs but sometimes similar PropertyTypes. However, when trying to create a select box like this Select-img, duplicate values are displayed as shown in the image provided.

How can I prevent these duplicated values from appearing?

Thank you for your help and apologies for any language errors.

javascript angularjs json

Answer 1

Answer №1

If you want to prevent duplicates, you can utilize the unique filter. Here is an example of how you can implement it:

<div layout="row" layout-align="center center">
   <md-select placeholder="Property type" ng-model="id" md-on-open="loadProperties()" style="min-width: 200px; padding: 20px;">
      <md-option ng-value="id" ng-repeat="id in list | unique:'propertyType'" >{{id.propertyType}}</md-option>
   </md-select>
</div>

It's important to note that AngularJS does not come with a built-in unique filter, so you will need to create your own. Here is an example of how you could do this:

app.filter('unique', function() {
   return function(input, key) {
      var unique = {};
      var uniqueList = [];
      for(var i = 0; i < input.length; i++){
          if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i]);
          }
      }
      return uniqueList;
   };
});

Answer 2

If you want to prevent duplicates, you can utilize the unique filter. Here is an example of how you can implement it:

<div layout="row" layout-align="center center">
   <md-select placeholder="Property type" ng-model="id" md-on-open="loadProperties()" style="min-width: 200px; padding: 20px;">
      <md-option ng-value="id" ng-repeat="id in list | unique:'propertyType'" >{{id.propertyType}}</md-option>
   </md-select>
</div>

It's important to note that AngularJS does not come with a built-in unique filter, so you will need to create your own. Here is an example of how you could do this:

app.filter('unique', function() {
   return function(input, key) {
      var unique = {};
      var uniqueList = [];
      for(var i = 0; i < input.length; i++){
          if(typeof unique[input[i][key]] == "undefined"){
            unique[input[i][key]] = "";
            uniqueList.push(input[i]);
          }
      }
      return uniqueList;
   };
});

Avoid repeating the same options in a dropdown menu

Answer №1

Similar questions

I encountered a "TypeError: keys must be a string" message while using json.dump()

Access the angular controller using the radio button option

Using PHP to store data in JSON format for GoJS

Ways to verify the functionality of a webpage once it has been loaded on my local machine's browser

Using animate.css and jQuery for sequential animations

The app's functionality is disrupted by a malfunctioning Appframework jQuery

What is the CoffeeScript alternative for () => { return test() }?

ThreeJS | The object's position cannot be cloned as it seems to be undefined, however, this is unexpected

Changing HTML lists into JSON format

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

Change the values of every element in an array

Performing an AJAX request to send data containing special characters

What is the best way to employ document.addEventListener in TypeScript?

I am attempting to create a skybox, yet it seems like I am overlooking a crucial element

CombineReducers takes all the reducer content and unpacks it into a single reducer

Guide on loading a JSON file in Play framework utilizing Scala

Having trouble with Vuejs Ternary Operator or Conditional in v-bind-style?

Tips for accessing a RESTful web service using an AJAX call

Mastering server requests in Angular 5

The indicated processing instruction is incompatible with the provided payment source. PayPal's hosted fields for credit card payments do not support this specific processor