0

Hello StackOverflow people !

TLDR; Fixed, my array was containing duped elements. On my way to clean this array ! Thanks @Igor for the light !

I'm currently working on a relic of the past : Angular JS (1.6) The problem here is simple : I have some divs that need to be repeated for each elements of an Array, things works perfect until the arrays exceed a length of 23 ...

Here's the code snippet of my issue :

<h4>
  <span ng-repeat="tag in editDocument.Tags | limitTo: 100" class="badge badge-pill badge-info">
    <span ng-bind-html="tag"></span>
    <a href="" ng-click="action_deleteTag_documentRow($event, editDocument.Id)">
      &times; 
    </a>
  </span>
</h4>

editDocument.Tags is populated with this array :

[
      'aerials',
      'aérien',
      'aériens',
      'fortress',
      'fortresses',
      'forteresse',
      'forteresses',
      'littoral ',
      'littoraux ',
      'nature ',
      'natures ',
      'mer ',
      'sea ',
      'coastline ',
      'eau ',
      'water',
      'architectures ',
      'architecture ',
      'patrimoine ',
      'patrimoines ',
      'heritage ',
      'monuments ',
      'monument ',
      'nature ',
      'natures ',
      'landscape ',
      'landscapes ',
      'paysage ',
      'paysages',
      'informative',
      'visit',
      'security',
      'work',
      'refreshment',
      'Fort-Brégançon',
      'opened',
      'public',
      'President',
      'François-Hollande',
      'managed',
      'Presidency-of-the-Republic',
      'site',
      'open',
      'reservation',
      'Bormes-les-Mimosas',
      'tourist-office',
      'quotes',
      'groups',
      'guided-tour',
      'last',
    ];

You can see here that I already tried to raise the limit by using the limitTo: 100 but it changes nothing.

I hope someone has a cheatcode for this. And obviously thank you for reading and brainstorming with me on this issue.

PS. : I log everytime the editDocument.Tags in order to check if the array is populated (it is.)

Sornin
  • 105
  • 2
  • 10
  • It's working fine in a [demo](https://stackblitz.com/edit/angularjs-frvwmc?file=home/home.html). Must have something to do with the actual HTML you're rendering in that `ng-bind-html`. Can you edit your answer and include JSON for items 20 through 25 from your editDocument.Tags array? – Jacob Stamm Nov 15 '21 at 15:23
  • Many thanks for helping me ! [Not working demo](https://stackblitz.com/edit/angularjs-fk4eae?file=home/home.controller.js). I've added the array of Tags (50 units) and it doesn't work even on the demo. – Sornin Nov 15 '21 at 16:12
  • 2
    Did you read the error in the console? Looks like you have duplicates in your values in the array. `[ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tag in $ctrl.editDocument.Tags | limitTo: 100, Duplicate key: string:nature , Duplicate value: nature ` – Igor Nov 15 '21 at 16:24
  • Thanks a lot ! You're right, my bad ... – Sornin Nov 15 '21 at 16:30

0 Answers0