Angular/MVC Duplicates In Repeater Are Not Allowed - angularjs

Question

First, here is all the code that leads me to the error I'm getting:
The JSON:
[
{
"Id": 0,
"UserName": "uniqueusername",
"Photo": "base64string",
"Email": "user#user.com",
"Office": "Location "
},
{
"Id": 1,
"UserName": "uniqueusername",
"Photo": "base64string",
"Email": "user#user.com",
"Office": "Location"
},
{
"Id": 2,
"UserName": "uniqueusername",
"Photo": "base64string",
"Email": "user#user.com",
"Office": "Location"
},
{
"Id": 3,
"UserName": "uniqueusername",
"Photo": "base64string",
"Email": "user#user.com",
"Office": "Location"
},
{
"Id": 4,
"UserName": "uniqueusername",
"Photo": "base64string",
"Email": "user#user.com",
"Office": "Location"
}
]
It is generated using this function in my controller:
List<string> Names = arepo.GetAllAvionteUsers();
List<UserPreviewViewModel> AllUsers = new List<UserPreviewViewModel>();
int count = 0;
foreach(string name in Names)
{
UserPreviewViewModel preview = new UserPreviewViewModel(name);
preview.Id = count;
AllUsers.Add(preview);
count++;
if (count == 10) break;
}
return Json(new { Users = JsonConvert.SerializeObject(AllUsers, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}) }, JsonRequestBehavior.AllowGet);
The View Model:
public int Id { get; set; }
public string UserName { get; set; }
public string Photo { get; set; }
public string Email { get; set; }
public string Office { get; set; }
the angular controller:
angular.module('app.module')
.factory('Users', ['$http', function UsersFactory($http) {
return {
AllUsers: function () {
return $http({ method: 'GET', url: '/Controller/GetAllUsers' });
}
}
}]);
angular.module('app.module')
.controller('UserController', ['$scope', 'Users', function ($scope, Users) {
var vm = this;
Users.AllUsers().success(function (data) {
vm.users = JSON.stringify(data.Users);
});
}]);
And finally the view:
<table class="dataTable row-border hover" datatable="ng" dt-instance="vm.dtInstance"
dt-options="vm.dtOptions">
<thead>
<tr>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Id</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Name</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Photo</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Email</span>
</div>
</th>
<th class="secondary-text">
<div class="table-header">
<span class="column-title">Office</span>
</div>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in vm.users">
<td>{{user.Id}}</td>
<td>{{user.UserName}}</td>
<td><img class="product-image" ng-src="data:img/jpg;base64,{{user.Photo}}"></td>
<td>{{user.EmailAddress}}</td>
<td>{{user.Office}}</td>
</tr>
</tbody>
</table>
Every time that I try to run this code I get the following error from my JSON:
angular.js:13920 Error: [ngRepeat:dupes] Duplicates in a repeater are
not allowed. Use 'track by' expression to specify unique keys.
Repeater: user in vm.users, Duplicate key: string:\, Duplicate value:
\
I have tried to use angular's suggested fix, which is track by $index and all that does is cause my page to freeze.
I have tried to take out the Formatting.Indented when I return the JSON string and all that does is give me the same error as well as taking out the ReferenceLoopHandling part and also getting the same error.
In the angular controller I tried to do JSON.parse(data) and I get the following error:
angular.js:13920 SyntaxError: Unexpected token o in JSON at position 1
When I try to do let users = data.Users and then do let count = users.length it gives me the number 85941 which seems like it is counting every single character in the string.
When I do a console.log(data) it gives me the JSON that I pasted above (I did change usernames, emails, and locations to keep my user's info safe).
At this point I have absolutely no clue what is wrong here or how to fix it, any help would be greatly appreciated.
Thanks!

Answer 1

Although I am not entirely sure as to why this error occurred in first place, the fix for it was not to return JSON from the controller. I modified my return statement like so:
return Json(JsonConvert.SerializeObject(AllUsers, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}), JsonRequestBehavior.AllowGet);
Then in the angular controller i did:
vm.users = JSON.parse(data);
That gave me the proper JSON array and now it works perfectly.