角/ MVC重複直放站不准許

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

視圖模型：

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

我試圖使用角度的建議修復，這是由$索引跟蹤，所有這一切導致我的網頁凍結。

我試圖拿出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語句，像這樣：

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

然後在相位控制器我所做的：

vm.users = JSON.parse(data);

這給了我正確的JSON陣列，現在它完美的作品。