The ng-repeat function is iterating through the array multiple times

Question

The ng-repeat function is iterating through the array multiple times

Using ng-repeat to bind the same array multiple times.

JavaScript :

    $scope.currentitem = item;
    $scope.currentitemCategory = $scope.currentitem.category.split(',');
    console.log($scope.currentitemCategory);

HTML:

   <div ng-repeat="category in currentitemCategory track by $index">
             <a href="/content/digital-library/us/en/search.html?category={{category}}">
            <span class="text"> {{category}} </span>
            </a>
                                         </div>

Console Output :

Categorized in audience/business brandguidelines corporateinitiatives/idf

javascript angularjs

Answer 1

Answer №1

After testing out the code snippet you provided, I have successfully created a sample application without encountering any duplicate entries. Everything seems to be working smoothly. However, if you are still experiencing issues, please share more details for further assistance.

var app= angular.module('sample', []);

app.controller('samplecontroller', function($scope){
   var item = {category: 'Basketball, Badminton, Cricket, Hockey'};
   $scope.currentitem = item;
   $scope.currentitemCategory = $scope.currentitem.category.split(',');
   console.log($scope.currentitemCategory);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="samplecontroller">
    <div ng-repeat="category in currentitemCategory track by $index">
      <a href="/content/digital-library/us/en/search.html?category={{category}}">
        <span class="text"> {{category}} </span>
      </a>
    </div>
  </div>

</body>

Answer 2

After testing out the code snippet you provided, I have successfully created a sample application without encountering any duplicate entries. Everything seems to be working smoothly. However, if you are still experiencing issues, please share more details for further assistance.

var app= angular.module('sample', []);

app.controller('samplecontroller', function($scope){
   var item = {category: 'Basketball, Badminton, Cricket, Hockey'};
   $scope.currentitem = item;
   $scope.currentitemCategory = $scope.currentitem.category.split(',');
   console.log($scope.currentitemCategory);
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="sample">
  <div ng-controller="samplecontroller">
    <div ng-repeat="category in currentitemCategory track by $index">
      <a href="/content/digital-library/us/en/search.html?category={{category}}">
        <span class="text"> {{category}} </span>
      </a>
    </div>
  </div>

</body>

The ng-repeat function is iterating through the array multiple times

Answer №1

Similar questions

Is it possible to verify if a string in JavaScript contains both numbers and special characters?

Concentrate on Selecting Multiple Cells in ag-Grid (Similar to Excel's Click and Drag Feature)

The optimal method for storing tokens in Vue when using Laravel Sanctum

The typeof operator is not functioning as anticipated when used with an ajax response

Is there a reason why the child elements do not appear within a div with an ng-if directive when the condition is true?

retrieve information at varying intervals through ajax

Transfer information using cURL without the need to refresh the webpage

Checkbox selection causing Bootstrap accordion to collapse

Attempting to implement an EventListener to alter the navbar upon scrolling, unsuccessful at the moment

Creating a Mocha+Chai test that anticipates an exception being thrown by setTimeout

"How to automatically populate an input field with a value when the page loads in an

Verify if spacebar is pressed and then use jQuery to add a hashtag with multi-language support

The connections of directives

Utilizing jQuery to Sort Table Rows based on an Array of Class Names

Ways to extract subarray elements that meet a certain condition and break out of the loop

What is the process for retrieving input values in Angular JS?

What is the best way to submit updated data from an Angular form?

The Nuxt authentication middleware fails to function properly upon clicking the back button in the browser

The JSON GET method displays HTML content when accessed through code or console, but presents a JSON object when accessed through a web address

successive ajax requests