Implement Angular functionality to populate a table with data based on the filter option that has been

At the moment, I am fetching carType data like this: 

Truck  
SUV  
Sedan  
Truck  
SUV

What I want is to create a filter select box with options that do not repeat, like so: 

 Truck
 Sedan
 SUV

Currently, my issue is that my select box shows all CarType results including duplicates which I want to remove.

Additionally, my result display after applying a filter is not functioning properly and I cannot identify where exactly the problem lies. 

<label for="filters">Filter by Car Type</label>
        <select id="filters" ng-model="selectedType" ng-options="x.type as x.type for x in result">
            <option value="">Select Car Type</option>
        </select>

In the table where I intend to show results based on filters: 

<tr ng-repeat="x in result|filter:selectedTDL">
            <td data-title="Car Type">{{x.type}}</td>
            <td data-title="Year">{{x.year}}</td>
        </tr>

I am not sure what is missing or incorrect causing the results to not display properly.

UPDATE: I managed to fix the filtering issue and now the display is based on the filtered option. However, I am unsure how to eliminate duplicates in the filter dropdown menu.

javascriptangularjs

Answer №1

It is recommended that you eliminate any duplicate values from your list by implementing filters on your own.

var app = angular.module("sampleApp", []);

app.controller("sampleController", ["$scope",
  function($scope) {
    $scope.result = [{
      type: "SUV"
    }, {
      type: "SUV"
    }, {
      type: "Truck"
    }, {
      type: "SUV"
    }, {
      type: "Van"
    }, {
      type: "Truck"
    }];

  }
]);


app.filter('unique', function() {
  
  return function(input) {
    let output = [];
    input.forEach((item) => {
      if (!output.includes(item.type)) {
        output.push(item.type);
      }
    });
    return output;
  };
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<div ng-app="sampleApp">
  <div ng-controller="sampleController">
    <label for="filters">Filter on Car Type</label>
    <select id="filters" ng-model="selectedType" ng-options="x  for x in result | unique">
      <option value="">Select Car Type</option>
    </select>

  </div>
</div>

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

Show the dropdown menu with names from the array in the ajax response

<html> <select name="cars"> <option value="34">Volvo XC90</option> <option value="54">Saab 95</option> <option value="12">Mercedes SLK</option> <option value="10">Audi TT</option> </select> ...

javascriptphpajax

Manipulate object position using Aframe and three.js

I'm working on developing a game using A-frame. I'm trying to add a shooting effect by incorporating a gun model that follows the user's cursor. I've coded a click event so that an object moves in front of the gun and follows the direct ...

javascriptthree.jsaframe

Stop ngOnChanges from being triggered after dispatching event (Angular 2+)

In Angular 2+, a custom two-way binding technique can be achieved by utilizing @Input and @Output parameters. For instance, if there is a need for a child component to communicate with an external plugin, the following approach can be taken: export class ...

javascriptangulartypescript

What is the reason that self focus doesn't function in JavaScript?

Whenever an input element triggers a blur event, I want to focus on a specific element. The issue arises when I try to focus on the same element that caused the blur event. Why does this only work when the element I am focusing on is not the one triggeri ...

javascriptjqueryjquery-events

Utilizing v-for in Vue with TypeScript to generate multiple checkboxes

My goal was to capture the values of checkboxes and store them in an array using v-model. However, I encountered an issue where the first time I toggle a checkbox, it doesn't register. Only after checking a second box and hitting submit does the secon ...

javascripttypescriptvue.js

Error occurs when attempting to change the color of a dynamically generated div, resulting in the message: "Type Error: Unable to assign a value to the property '

I'm facing an issue with my code where I have a parent div that loads with a random color, and upon clicking a button, it should create a new colored div inside. However, I keep encountering the following error: TypeError: Cannot set property ' ...

javascriptvue.js

What is the process for extracting values from input fields and saving them to a JSON file?

I'm currently exploring how to handle data and I am attempting to extract the values from input fields and save them to a json file. However, I seem to be encountering some issues with this process. Any assistance you could provide would be greatly ap ...

javascriptphpjqueryjson

Add a JavaScript library to the nuxt.config.js file using Assets

When attempting to add javascript files, I keep encountering the following issue: " error in GET http://localhost:3000/assets/js/jquery-3.4.1.min.js net::ERR_ABORTED 404 (Not Found) I'm unsure if this is the correct method for including the ja ...

javascriptvue.jsnuxt.js

Issue encountered while attempting to run executeJavascript()

Hello, I’m looking to insert the output of a Python function that I have stored in the variable data. However, when I attempt to insert the value of this variable using the command document.getElementById("h1-fs-s5").innerHTML, it doesn’t work as expec ...

javascriptnode.jselectron

React Header Component Experiencing Initial Scroll Jitters

Issue with Header Component in React Next.js Application Encountering a peculiar problem with the header component on my React-based next.js web application. When the page first loads and I begin scrolling, there is a noticeable jittery behavior before th ...

javascriptreactjsscroll

Manage the jQuery resize handles by controlling their behavior when clicked inside and outside of the corresponding DIV

I am dynamically creating DIV elements and using jQuery resizeable handles on them. Is there a way to show the handles on click or hover, and then hide them when clicking outside the relevant div? Check out this jsFiddle $('.resizable').on(&ap ...

javascriptjqueryhtmlcssjquery-ui

Create a div element that is fixed position, with a width that adjusts dynamically, and is centered on

Even though this is a common issue, I have yet to find a solution that actually works for me. The centred div in my chrome extension isn't displaying correctly, even though it works perfectly on jsfiddle. After dynamically appending a div with specif ...

javascriptcssgoogle-chrome-extension

Preventing Redundancy in Angular 2: Tips for Avoiding Duplicate Methods

Is there a way I can streamline my if/else statement to avoid code repetition in my header component? Take a look at the example below: export class HeaderMainComponent { logoAlt = 'We Craft beautiful websites'; // Logo alt and title texts @Vie ...

javascriptangulartypescript

Replace the image with text inside an anchor when the anchor is being hovered

I want a logo (we'll call it .item-logo) to be shown inside a circle when not being hovered over, but when you hover over the container, the date should be displayed. Here is the HTML code: <div id="main-content" class="container animated"> ...

javascriptjqueryhtmlcss

Issue: Control with the specified name '0' could not be located

Kindly review this code snippet and assist me in resolving the issue. I have set up a formArray where the label and formControlName do not match, so I have utilized mapping to synchronize them. Upon receiving a response from the API, I initialize the for ...

javascriptangulartypescriptangular-reactive-forms

Using AngularJS to pass a parameter to a directive's template

My basic set looks like this HTML <linear-chart chartData="myArray" height="666"> </linear-chart> JS ... ... app.directive('linearChart', function($window){ return{ restrict:'EA', template:"<svg ...

javascriptangularjs

Guide on extracting HTML content from JSON and displaying it in a UIWebView (utilizing Swift 3.0)

Can anyone guide me on how to use JSON2HTML to parse HTML data from JSON and display it in an UIWebView using Swift 3.0? Your help is much appreciated! This is what I have attempted so far: let jsfile1 = try!String(contentsOfFile: Bundle.main.path(forRes ...

javascripthtmljsonswiftuiwebview

Error: Headers cannot be set after they have already been sent, resulting in an Unhandled Promise Rejection with rejection id 2

I'm a beginner with Node.js and I've been using express.js. In a section of my code, I'm trying to retrieve data from a form via AJAX and store it in a variable called url. I have access to request.body, but I'm encountering an issue wh ...

javascriptnode.jsexpress

Checking the condition prior to adding an item and displaying a message in ReactJS

I am currently working on an application using React.JS Before adding data, I want to implement a condition check. This is the code snippet: const App = () => { const [item, setItem] = useState([]) const [category, setCategory] = useState([]) ...

javascriptarraysjsonreactjsapi

Make sure to blur all images whenever one of them is clicked

I am currently facing an issue with my webpage where I have 3 images displayed. I have implemented an event listener to detect clicks on the images, and once a click occurs on one of them, I want everything else on the page to become blurred, including the ...

javascripthtmlcss