为什么我的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;
        }
    }
}

上面的代码来自我的 TrialController,我正在接受Angular的调用.

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

这是我的浏览页面:

@{
    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构建一个安静的应用程序.我正在使用本教程角度与ASP.NET和一个关于ASP.NET的Lynda.com课程.

这是我的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;.