Angular Rest API 不会返回 JSON 属性答案

【问题标题】：AngularRest API wont return JSON propertyAngular Rest API 不会返回 JSON 属性
【发布时间】：2016-08-12 08:28:54
【问题描述】：

我有 3 个组件，web api、控制器和 html。我可以很好地访问 web api，然后以 JSON 格式返回结果，但是当它尝试将 JSON 呈现为 html 时，它看起来像这样。

{
    "Projects": [{
        "ProjectId": 1,
        "Name": "Project1",
        "Key": "Software",
        "ProjectTypeKey": "1"
    }, {
        "ProjectId": 2,
        "Name": "Project2",
        "Key": "Hardware",
        "ProjectTypeKey": "2"
    }, {
        "ProjectId": 3,
        "Name": "Project3",
        "Key": "Hardware",
        "ProjectTypeKey": "3"
    }]
}

WebAPI

    public IHttpActionResult Get()
    {
        listProjects.Add(new Project { ProjectId = 1, Name = "Project1", Key = "Software", ProjectTypeKey = "1" });
        listProjects.Add(new Project { ProjectId = 2, Name = "Project2", Key = "Hardware", ProjectTypeKey = "2" });

        listEmployeeProject.Add(new EmployeeProject {Projects = listProjects });

        return Json(listEmployeeProject);
    }

控制器

var myApp = angular.module('myApp', []);

myApp.service('dataService', function ($http) {

this.getData = function () {
    // $http() returns a $promise that we can add handlers with .then()
    return $http({
        method: 'GET',
        url: '/api/employee'           
    });
}
});

myApp.controller('ProjectController', function ($scope, dataService) {
$scope.Projects = [];
dataService.getData().then(function (result) {
    $scope.Projects = result.data;
});
});

HTML

<div ng-app="myApp" ng-controller="ProjectController">
{{1 + 1}}

<div ng-repeat="project in Projects">
    {{project}}
</div>

即使我将 {{project}} 切换到 {{project.Name}}，页面上也不会呈现任何内容。

console.log(results.data) 如下所示

【问题讨论】：

{{1 + 1}} 被渲染了吗？
是的，这呈现为 2
必须检查您在result.data 中得到了什么？
console 有任何错误吗？在您的then function 中添加console.log(result.data)。
results.data 是一个包含 3 个对象的数组

标签： angularjs json rest asp.net-web-api

【解决方案1】：

您的控制台非常清楚，您正在返回一个长度为 1 的数组，其中包含另一个长度为 3 的数组

这是因为你的代码中有这一行

listEmployeeProject.Add(new EmployeeProject {Projects = listProjects });

在这里，您正在重新调整 EmployeeProject 数组，并且该数组的每个元素都有多个项目。所以做这些事情中的任何一个

一个。返回 listProjects 就像返回 Json(listProjects) （理想情况下你应该返回 Ok(model)）

b.或者在角度承诺中，

$scope.Projects = result.data[0].Projects;

【讨论】：