javascript - 为什么我返回的 JSON 响应被方括号 [] 包围？

Question

我想弄清楚为什么我的 JSON 响应被方括号括起来。我正在使用 ASP.NET Web API 和 Angular。我在想这就是我的 Angular 代码没有打印到 HTML 的原因。

namespace GeekQuiz.Controllers
{
    public class TrialController : ApiController
    {
        private TriviaContext db = new TriviaContext();

        // GET api/trial
        public IQueryable<TriviaQuestion> GetTriviaQuestions()
        {
            return db.TriviaQuestions;
        }
    }
}

上面的代码来 self 的 TrialController，我正在从 Angular 进行 get 调用。

var app = angular.module('myApp', []);
app.controller('questCtrl', function ($scope, $http) {
    $http.get("/api/trial").success(function (data, status, headers, config) {
        $scope.options = data.options;
    }).error(function (data, status, headers, config) {
        $scope.title = "Oops... something went wrong";
        $scope.working = false;
    });
});

这是我的 View 页面:

@{
    ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>

<div ng-app="myApp" ng-controller="questCtrl">

    <table>
        <tr ng-repeat="option in options">
            <td>{{ option.id }}</td>
            <td>{{ option.title }}</td>
            <td>{{ option.questionId }}</td>
        </tr>
    </table>

</div>

<address>
    One Microsoft Way<br />
    Redmond, WA 98052-6399<br />
    <abbr title="Phone">P:</abbr>
    425.555.0100
</address>

<address>
    <strong>Support:</strong>   <a href="mailto:Support@example.com">Support@example.com</a><br />
    <strong>Marketing:</strong> <a href="mailto:Marketing@example.com">Marketing@example.com</a>
</address>
@section scripts {
    @Scripts.Render("~/Scripts/angular.js")
    @Scripts.Render("~/Scripts/app/quest-controller.js")
}

我正在尝试使用 ASP.NET 并尝试学习如何使用 Angular 和 .NET 构建一个 Restful 应用程序。我正在使用本教程 angular with ASP.NET以及 ASP.NET 上的 Lynda.com 类(class)。

这是我的 JSON 响应。我如何获得方括号的骑行？我不知道他们为什么在那里。

[
  {
    "options":[
      {"id":1,"title":"2000","questionId":1},
      {"id":2,"title":"2001","questionId":1},
      {"id":3,"title":"2002","questionId":1},
      {"id":4,"title":"2003","questionId":1}],
    "id":1,
    "title":"When was .NET first released?"
  },
  {
    "options":[
      {"id":5,"title":"Contoso Ltd.","questionId":2},
      {"id":175,"title":"System.DateTime","questionId":44},
      {"id":176,"title":"System.Float","questionId":44}
    ],
    "id":44,
    "title":"Which of the following is NOT a value type in the .NET Framework Common Type System?"
  }
]

这是一个成功的工作 JSON 响应的样子:

{
  "options":[
    {"id":85,"title":"DOS","questionId":22},
    {"id":86,"title":"Altair Basic","questionId":22},
    {"id":87,"title":"PC Basic","questionId":22},
    {"id":88,"title":"Windows","questionId":22}
  ],
  "id":22,
  "title":"What was Microsoft's first product?"
}

也许这会有所帮助:

namespace GeekQuiz.Models
{
    using System.Collections.Generic;
    using System.ComponentModel.DataAnnotations;

    public class TriviaQuestion
    {
        public int Id { get; set; }

        [Required]
        public string Title { get; set; }

        public virtual List<TriviaOption> Options { get; set; }
    }
}

这段代码是 TriviaQuestion 模型，也许我没有正确对待它。 如果任何出色的 .NET 程序员正在寻找门徒，请告诉我。

Answer 1

因为 IEnumerable<T>被序列化为 JSON 数组。

关于 Angular 部分...

我猜 $scope.options = data.options;是错误的，因为您要从 WebAPI 返回数组本身，而且我找不到理由认为您的选项 正在序列化到一个包含属性 options 的对象中但您的数据似乎按原样作为 JSON 数组返回。

如果您将所谓的分配转为 $scope.options = data;，您的绑定(bind)可能会起作用.