angular: handling duplicates in ng-repeat

Question

angular: handling duplicates in ng-repeat

Here is the JSON data:

streams = [{ id: 0,
   codec_type: 'video',
   content: '1920x1040 - H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10' },
 { id: 1,
   codec_type: 'audio',
   content: '5.1(side) - cze - undefined' },
 { id: 2,
   codec_type: 'audio',
   content: '5.1(side) - eng - undefined' },
 { id: 3, codec_type: 'subtitle', content: 'cze - Czech' },
 { id: 4, codec_type: 'subtitle', content: 'eng - English' }];

This is how it looks in Angular HTML markup:

<md-input-container ng-repeat="stream in streams">
  <label>{{stream.codec_type}}</label>
  <md-select ng-model="stream">
    <md-option value="{{stream.id}}">{{stream.content}}</md-option>
  </md-select>
</md-input-container>

Hello! I am trying to locate duplicate strings within the JSON and display only one select field with multiple options for each duplicate (codec_type). Any suggestions on how to achieve this efficiently? Thank you!

!!! UPDATE !!!

I realize that I need to redesign the JSON structure and work with objects separately or employ a different approach for handling this situation.

You can find the CodePen link here..

javascript json angularjs angularjs-ng-repeat

Answer 1

Answer №1

To achieve your goal, you can utilize two different filters: one to extract a list of unique codec types and another to filter codecs based on their type.

Check out this CodePen example

Here is the HTML code:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-repeat="codec in streams | unique:'codec_type'">
      {{codec.codec_type}}
      <select ng-model="$parent.selected[codec.codec_type]" ng-options="stream as stream.content for stream in streams | codec:codec.codec_type track by stream.id">
      </select>
    </div>
    Selected streams: {{selected}}
  </div>
</div>

And here is the Controller code:

angular.module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.selected = {
      'video': null,
      'audio': null,
      'subtitle': null
    };
    $scope.streams = [
      {
        id: 0,
        codec_type: 'video',
        content: '1920x1040 - H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10'
      },
      { id: 1,
        codec_type: 'audio',
        content: '5.1(side) - cze - undefined'
      },
      { id: 2,
        codec_type: 'audio',
        content: '5.1(side) - eng - undefined'
      },
      { id: 3,
        codec_type: 'subtitle',
        content: 'cze - Czech'
      },
      { id: 4,
        codec_type: 'subtitle',
        content: 'eng - English'
      }];
  })
  .filter('unique', function () {
    return function (items, id) {
      var filtered = [];
      var ids = {};

      angular.forEach(items, function (item) {
        if (typeof(ids[item[id]]) === 'undefined') {
          filtered.push(item);
          ids[item[id]] = true;
        }
      });

      return filtered;
    };
  })
  .filter('codec', function () {
    return function (items, codec) {
      var filtered = [];

      angular.forEach(items, function (item) {
        if (item.codec_type === codec) {
          filtered.push(item);
        }
      });

      return filtered;
    };
});

Answer 2

To achieve your goal, you can utilize two different filters: one to extract a list of unique codec types and another to filter codecs based on their type.

Check out this CodePen example

Here is the HTML code:

<div ng-app="app">
  <div ng-controller="ctrl">
    <div ng-repeat="codec in streams | unique:'codec_type'">
      {{codec.codec_type}}
      <select ng-model="$parent.selected[codec.codec_type]" ng-options="stream as stream.content for stream in streams | codec:codec.codec_type track by stream.id">
      </select>
    </div>
    Selected streams: {{selected}}
  </div>
</div>

And here is the Controller code:

angular.module('app', [])
  .controller('ctrl', function ($scope) {
    $scope.selected = {
      'video': null,
      'audio': null,
      'subtitle': null
    };
    $scope.streams = [
      {
        id: 0,
        codec_type: 'video',
        content: '1920x1040 - H.264 / AVC / MPEG-4 AVC / MPEG-4 part 10'
      },
      { id: 1,
        codec_type: 'audio',
        content: '5.1(side) - cze - undefined'
      },
      { id: 2,
        codec_type: 'audio',
        content: '5.1(side) - eng - undefined'
      },
      { id: 3,
        codec_type: 'subtitle',
        content: 'cze - Czech'
      },
      { id: 4,
        codec_type: 'subtitle',
        content: 'eng - English'
      }];
  })
  .filter('unique', function () {
    return function (items, id) {
      var filtered = [];
      var ids = {};

      angular.forEach(items, function (item) {
        if (typeof(ids[item[id]]) === 'undefined') {
          filtered.push(item);
          ids[item[id]] = true;
        }
      });

      return filtered;
    };
  })
  .filter('codec', function () {
    return function (items, codec) {
      var filtered = [];

      angular.forEach(items, function (item) {
        if (item.codec_type === codec) {
          filtered.push(item);
        }
      });

      return filtered;
    };
});

Answer 3

Answer №2

To implement the ngOptions directive, follow these steps:

For detailed instructions, refer to the AngularJS Documentation here

Here is an example code snippet:

<select ng-model="category" ng-options="category.name for category in categories>
   <option value=""> Select Category </option>
</select>

There are various ways to utilize ng-options, and the one showcased above is just one of them.

label for value in array

Refer to the provided link for a detailed explanation of each option available and select the one that best suits your requirements.

Answer 4

To implement the ngOptions directive, follow these steps:

For detailed instructions, refer to the AngularJS Documentation here

Here is an example code snippet:

<select ng-model="category" ng-options="category.name for category in categories>
   <option value=""> Select Category </option>
</select>

There are various ways to utilize ng-options, and the one showcased above is just one of them.

label for value in array

Refer to the provided link for a detailed explanation of each option available and select the one that best suits your requirements.

Answer 5

Answer №3

MASTERMIND:

let categories_array = [];
$scope.isDifferent = function (category) {
     if (categories_array.indexOf(category) === -1){
         return true;
     } else {
         categories_array.push(category);
         return false;
     }
}

MARKUP:

    <md-input-container ng-repeat="item in items">
         <div ng-if=isDifferent(item.type)>
             <label>{{item.type}}</label>
             <md-select ng-model="item">
                <md-option value="{{item.id}}">{{item.name}}</md-option>
             </md-select>
         </div>
    </md-input-container>

Answer 6

MASTERMIND:

let categories_array = [];
$scope.isDifferent = function (category) {
     if (categories_array.indexOf(category) === -1){
         return true;
     } else {
         categories_array.push(category);
         return false;
     }
}

MARKUP:

    <md-input-container ng-repeat="item in items">
         <div ng-if=isDifferent(item.type)>
             <label>{{item.type}}</label>
             <md-select ng-model="item">
                <md-option value="{{item.id}}">{{item.name}}</md-option>
             </md-select>
         </div>
    </md-input-container>

angular: handling duplicates in ng-repeat

!!! UPDATE !!!

Answer №1

Answer №2

Answer №3

Similar questions

What could be causing my radio group to not validate when it is marked as required?

Preventing select from opening when closing chip in Vuetify: A simple guide

Is there a way to automatically redirect to a 404 page when a promise is rejected in the route configuration of Angular?

What is the best way to toggle the visibility of multiple column groups in Ag-Grid community using dynamic

Attempting to access an avatar image via an API, only to encounter an error message indicating that the avatar is not defined

User currently signed in: What specific information should be transmitted to the web browser?

I am having trouble getting the bootstrap link and css files to work on a specific URL. Can you please help me troubleshoot this issue and let me know if there are any additional files needed to

Difficulty encountered while attempting to deploy the front-end on Heroku

Is there a way to transfer a JSON object to Excel using Nextjs/React?

Updating a numeric field in Mongoose by a percentage of its current value

Conceal a division on a webpage according to the URL of the specific

What can I do to resolve a node server issue with the error message "npm ERR! code ELIFECYCLE npm ERR! errno 1"?

Display a badge in the navbar on specific VueJS pages

Utilizing AngularJS to invoke a jQuery plugin

Assigning a specific data type value to an element as it enters the top of the viewport

There appears to be a glitch preventing Phonegap from properly syncing with Google Analytics

Guide on transforming a collection of files from formdata into a JavaScript object

How to effectively filter out negative numbers in AngularJS

Angular2's $compile directive functions similarly to AngularJS 1's $compile directive

When the getImageData event is triggered upon loading