Угловое/MVC Дубликаты В Repeater Не допускаются

Question

Во-первых, здесь весь код, который приводит меня к ошибке я получаю:

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" 
    } 
] 

Он создан с помощью этой функции в мой контроллер:

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; } 

угловой регулятор:

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); 
    }); 

}]); 

И, наконец, вид:

<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> 

Каждый раз, когда я пытаюсь запустить этот код, я получаю следующее сообщение об ошибке от моего 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: \

Я попытался использовать исправленное угловое исправление, которое является дорожкой по индексу $ index, и все, что делает, вызывает зависание моей страницы.

Я попытался вынуть Formatting.Indented, когда возвращаю строку JSON, и все, что делает, дает мне ту же ошибку, что и вынимает часть ReferenceLoopHandling, а также получает ту же ошибку.

В угловом контроллер я пытался сделать JSON.parse (данные), и я получаю следующее сообщение об ошибке:

angular.js:13920 SyntaxError: Unexpected token o in JSON at position 1

Когда я пытаюсь сделать let users = data.Users, а затем сделать let count = users.length это дает мне номер 85941, который кажется как и подсчет каждого символа в строке.

Когда я делаю console.log (данные), он дает мне JSON, который я вставил выше (я изменил имена пользователей, адреса электронной почты и местоположения, чтобы сохранить информацию моего пользователя в безопасности).

На данный момент у меня нет абсолютно никакого понятия, что здесь не так, или как исправить это, любая помощь будет принята с благодарностью.

Спасибо!

Answer 1

Хотя я не совсем уверен, почему эта ошибка возникла на первом месте, исправление для нее заключалось не в том, чтобы вернуть JSON из контроллера. Я изменил свое обратное заявление следующим образом:

return Json(JsonConvert.SerializeObject(AllUsers, Formatting.Indented, new JsonSerializerSettings { ReferenceLoopHandling = ReferenceLoopHandling.Ignore}), JsonRequestBehavior.AllowGet); 

Затем в угловом контроллере я сделал:

vm.users = JSON.parse(data);

Это дало мне надлежащий массив JSON и теперь он работает отлично.