AngularJs Duplicates in a repeater are not allowed. Key: undefined

Question

Ive been trying to solve this angular ng-repeat problem but getting this error

Duplicates in a repeater are not allowed. Repeater: document in project.documentConfig.documents track by document.Name key: undefined

Html:

<tr ng-repeat="project in translatorHubConfig.projects"> <td>{{ project.ProjectName }}</td> <td>{{ project.SourceLanguage }}</td> <td>{{ project.TargetLanguage }}</td> <td>{{ project.Status }}</td> <td> <div ng-repeat="document in project.documentConfig.documents track by document.Name"> <label> <input type="radio" value="{{document.Name}}" ng-model="project.documentConfig.documents" /> <a ng-href="{{document.documentUrl}}" style="cursor: pointer;">{{ document.Name }}</a> </label> </div> </td> <td></td> <td><span class="train-project" ng-click="TrainProject(project.ProjectName, project.documentConfig.documents)" /></td> </tr>

If i change it to track by $index

<td> <div ng-repeat="document in project.documentConfig.documents track by $index"> <label> <input type="radio" value="{{document.Name}}" ng-model="project.documentConfig.documents" /> <a ng-href="{{document.documentUrl}}" style="cursor: pointer;">{{ document.Name }}</a> </label> </div> </td>

Each time that i click on radio button will produce this:

Response:

{projects: Array(3), Success: true, StatusMessage: "", PageNumber: 0, PageSize: 0, …} PageNumber:0 PageSize:0 StatusMessage:"" Success:true TotalPages:1 projects:Array(3) 0:{ProjectName: "DemoTranslatorHub", ProjectLabel: null, DisplayName: "DemoTranslatorHub", SourceLanguage: "English", TargetLanguage: "Korean", …} 1:{ProjectName: "DemoTranslatorHub_En_Es", ProjectLabel: null, DisplayName: "DemoTranslatorHub_En_Es", SourceLanguage: "English", TargetLanguage: "Spanish", …} 2:{ProjectName: "DemoTranslatorHub_En_Ja", ProjectLabel: null, DisplayName: "DemoTranslatorHub_En_Ja", SourceLanguage: "English", TargetLanguage: "Japanese", …} length:3

I am not quite sure what is it i am doing it wrongly. Tqvm in advanced.

The ng-model="project.documentConfig.documents" is stomping on ng-repeat="document in project.documentConfig.documents. — georgeawg
– georgeawg, Commented May 18, 2018 at 4:27
can you create a plunker or code pen of your code? It will be blazing fast resolve it. — Mohammed Gadi
– Mohammed Gadi, Commented May 18, 2018 at 4:55

Manish Balodia · Accepted Answer · 2018-05-18 03:59:48Z

3

Use track by $index in ng-repeat or you can use a key that have all unique values.

answered May 18, 2018 at 3:59

Manish Balodia

1,8752 gold badges24 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Eduardo Rosostolato · Accepted Answer · 2018-05-18 03:56:19Z

You can't track NG repeater with a key that will get repeated values, so the correct way is to use $index as you did or maybe, if documents don't have duplicated objects, there is no need to track. But reading the error it's like some of the objects in array have undefined 'name' key, so that's why you got empty radio buttons. I didn't get your question, what did you expect to happen?

Umakant Jadhav · Accepted Answer · 2020-07-31 06:55:52Z

I am not sure but problem is ng-model="project.documentConfig.documents" when you click radio button project.documentConfig.documents gets updated and ng-repeat tries to rerender the html according to project.documentConfig.documents

Collectives™ on Stack Overflow

AngularJs Duplicates in a repeater are not allowed. Key: undefined

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related