An Item With the Same Key Has Already Been Added

Introduction

The error is "An item with the same key has already been added."

For this most likely, you have model which contains the same property twice.

It Happens (Error)

In AngularJS and JSON, it happens when you try to post the page by ng-click or ng-submit, the model.PropertyName gets in lower case or upper case (I'm showing a lower case property below):

// This was the object that got loaded.

obj: { authorName: "Atul", authorAge: 27 } 

// This is what is getting posted after we update the name

obj: { authorName: "Atul", authorname: "Atul K", authorAge: 27 } 

Here, the error is in the model. As now, we have got two properties with the same name.

authorname and authorName

It Happens (Solution)

Because, somehow model's AuthorName property gets in lower case in your HTML form:

// This is what mistake is in the HTML form

<input type="text" ng-model="data.authorname"></input> 

So, just rename the model's property name to as it is in JSON object. In our case, data.authorname needs to be data.authorName.

Hope this tip will help someone to save some time. :)