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错误：[ngRepeat：dupes]转发器中的重复项是不允许。使用'track by'表达式指定唯一键。 Repeater：vm.users中的用户，Duplicate键：string：\，重复值： \

我试图使用angular的建议修复，这是由$ index跟踪的，所有这一切都会导致我的页面冻结。

当我返回JSON字符串时，我试图取出Formatting.Indented，所有这一切都给了我同样的错误，并且取出了ReferenceLoopHandling部分并且也得到了同样的错误。

在角度控制器中，我试图做JSON.parse（数据），我得到以下错误：

angular.js：13920 SyntaxError：位置1的JSON中的意外标记o

当我尝试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数组，现在它完美无缺。

不允许在Repeater中使用Angular / MVC重复项

1 个答案: