Issues with AngularJS Nested ng-repeat Functionality in v1.2.1

I'm currently developing a system where I need to nest two ng-repeat statements to iterate through a 2D array. I managed to achieve this successfully using version 1.1.1, as shown here:

http://jsfiddle.net/skArT/1/

However, when I tried the same code with Angular version 1.2.1, it stopped working and threw an error:

http://jsfiddle.net/skArT/2/

Error:

Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: x in value, Duplicate key: number:0

My question is, how can I replicate the functionality of version 1.1.1 with newer Angular versions?

javascriptangularjsangularjs-ng-repeat

Answer №1

Simply pay attention to the error message and make adjustments based on it. Replace:

<div ng-repeat="x in value">{{x}}</div>

With:

<div ng-repeat="x in value track by $index">{{x}}</div>

Answer №2

One solution to this issue is to include a track by clause. It may seem like a small requirement in your particular case, but it can make a big difference.

<html ng-app="myApp" ng-controller="myCtrl">
    <div ng-repeat="(index, value) in field">        
        <div ng-repeat="(key,x) in value track by key">{{x}}</div>
        <br/>
    </div>
</html>

http://jsfiddle.net/92bSt/

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

Is it possible to blur all elements of a form except for the submit button?

Can someone help me with a form issue I am facing? <form> <input type="text>' <input type="submit">' </form>'' After submitting the form, I would like to blur the entire form: $(this).closest('form') ...

javascriptjqueryhtmlcssforms

Ways to showcase an array using ng-repeat

Here is a JSON array structure: { "School1": [{"name": "john", "age":"28"}, {"name": "paul", "age":"27"}], "School2": [{"name": "david", "age":"27"}, {"name": "sil", "age":"28"}] } How can I use ng-repeat in Angular t ...

angularjshtml-tableangularjs-ng-repeat

Tips for utilizing JSON.parse

Within my ajax request, I am encountering the following code: 403: function(jqXHR) { var error = jqXHR.responseText; console.log(error); } When this error occurs, a message is displayed in the console: Htt ...

javascriptjsonajaxnode.jsexpress

Why is the lifecycle callback not being triggered?

I am currently learning how to develop with Vue.js. I have been trying to use the lifecycle callbacks in my code. In my App.vue file, I have implemented the onMounted callback. However, when I run the code, I do not see the message appearing in the consol ...

javascripttypescriptvue.js

Imitate a HTTP request

Currently, I am working on developing a front-end application using Angular (although not crucial to this question). I have a service set up that currently supplies hard-coded JSON data. import { Injectable } from '@angular/core'; import { Obser ...

javascriptajaxangularhttp

`WebAuthn API allows for easy identification of fingerprints``

Google introduced WebAuthn https://developers.google.com/web/updates/2018/05/webauthn two years back. Is it possible to accurately identify the finger that a user registered or verified? For instance, the server could not only obtain the public key but a ...

javascriptjavafingerprintbiometricswebauthn

button that takes you back to the top of a mobile website

I want to customize the Scroll To Top button so that it only appears once the user begins scrolling down, rather than always being visible even when at the top of the page. Just a heads up, I don't have much experience with JavaScript, so I might need ...

javascriptjqueryhtmlcss

Invoking a PHP function file through Ajax

Currently, I am utilizing Ajax with Bootstrap Modal to retrieve content from a Database. One of the functions in my functions file is responsible for verifying the existence of a remote file: function checkRemoteFile($url) { $ch = curl_init(); cur ...

javascriptphpjqueryajax

Multiple file formats supported by Uploadify

I am trying to find a solution for having various file types in the jQuery plugin Uploadify. Consider this scenario: You want to open a file with a program of your choice. Starting with a default OS dialog, you can select different file types from a dropd ...

javascriptjquerycustomizationuploadify

Incorporating a hyperlink into a ReactJS object's value

I have a ReactJs app with an object containing English translations. Is it possible to make the word "here" in the paragraph a clickable link by adding the URL of description.href? I tried adding it as HTML, but it rendered as text. const EnMessages = { ...

javascriptreactjs

Retrieve child and descendant nodes with Fancytree JQuery

I'm currently utilizing Fancytree and have created the following tree structure: root |_ child1 |_ subchild1 |_ subchild2 |_ subchild3 |_ subchild4 When the selected node is child1, I am able to retrieve the fir ...

javascriptjqueryfancytree

Tips for transferring information between two distinct ports within a single application

I have been utilizing the expressjs library for my project. It functions as a server on localhost:8000 and I am displaying static pages through it. However, my application operates on localhost:4200. Despite attempting to share the same cookie or localSt ...

javascriptexpress

What are the steps to utilize the .find() method to search for documents in a database that belong to the current user

My back-end code for the 'get' request to my '/logs' collection returns data in an array labeled "times": router.get('/', (req, res) => { time .find({'userName': req.params.userName}) .exec() .then(times => ...

javascriptnode.jsmongodbmlab

Looking for a vertical scrollbar solution for your idangerous vertical swiper?

Incorporating idangerous vertical swiper with two slides in a mobile app through jquery mobile has proven challenging. Specifically, I am struggling to implement a vertical scroll bar in the second slide due to its fixed height and the potential collision ...

javascriptjqueryhtmlcssjquery-mobile

Having trouble accessing the menu in the dropdown div when clicking back?

I am working on creating a menu that drops down from the top of the page using JQuery. I have everything set up with the code below: <div id="menu"> <div id="menucontentwrapper"> <div id="menucontent"></div> </di ...

javascriptjqueryhtml

Exploring the Power of 2D Arrays in JavaScript

Hey there! I'm having trouble defining a 2D array in JS. Two errors are getting in my way and I can't figure out what's going wrong. i is generated by a for loop - it's defined. Even when I try replacing i with 0, the same error occurs. ...

javascriptarraysmultidimensional-arraybbc-microbit

Issue with capturing mouse position in canvas when hovering over <h1> element above it

I am working on a project using React Three Fiber to animate a 3D model that follows the mouse cursor. However, I have noticed that when the mouse hovers over some divs or headings on top of the canvas element, the animation freezes and becomes choppy unti ...

javascriptreactjsanimationthree.jsreact-three-fiber

What is the best way to flip cards with the onClick event in JavaScript?

My cards are currently facing down with the code* provided. What steps should I take to flip them face up using onClick functions? Furthermore, how can I store the IDs in an Array and use them to retrieve images from my image collection? HTML <table s ...

javascripthtmlcss

The jquery fancybox ajax modal popup fails to display in Internet Explorer 7

Recently, I utilized JQuery fancy box for the first time to display a menu list. When clicking on a specific item, the page is rendered properly in an iframe. However, if there is already an AJAX model popup present on the rendered page, it doesn't di ...

javascriptjqueryhtmlajaxinternet-explorer

Converting arrays of objects in JavaScript made easy

Could someone please assist me in converting my array of objects into an object or JSON format? Here is a sample snippet: var data = [ {"code":"M","montant":"2000","title":"Masculine"}, {"code" ...

javascriptangularjsjson