getJSON 方法在 jquery 中返回 'undefined'

Question

我正在做一个 Asp.net 核心 2.1 项目，并有以下模型

人

public class Person
{
    [Key]
    public int ID { get; set; }
    [Required]
    [MaxLength(150)]
    public string Name { get; set; }
    [Required]
    [MaxLength(150)]
    public string Family { get; set; }
    [Required]
    public int Age { get; set; }
}

我的项目中有一个 Web API 控制器，您可以看到它。

网页接口控制器

[Produces("application/json")]
[Route("api/People")]
public class PeopleController : ControllerBase
{
    private readonly ApplicationContext _db;
    public PeopleController(ApplicationContext db)
    {
        _db = db;
    }
    [HttpGet]
    public IEnumerable<Person> GetPerson()
    {
        return _db.Person;
    }
}

现在我想从我的 Web API 控制器获取数据并以index.cshtml显示

Index.cshtml

<h2>List Person</h2>
<table class="table table-bordered" id="list">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Family</th>
    <th>Age</th>
  </tr>
</table>
<script>
  $.getJSON("/api/People", function(res) {
    $.each(res, function(key, val) {
      alert(val.Age);
      var item =
        "<tr><td>" +
        val.ID +
        "</td><td>" +
        val.Name +
        "</td><td>" +
        val.Family +
        "</td><td>" +
        val.Age +
        "</td><td></td></tr>";
      $("#list").append(item);
    });
  });
</script>

浏览器中"网络"选项卡中的实际 JSON

[{"id":1,"name":"jack","family":"bfd","age":30},{"id":2,"name":"mr john","family":"sobhany","age":36}]

但是有一个问题。所有数据显示在我的视图中，但所有值都undefined。我的代码中有什么问题？

Answer 1

正如你在 JSON 中看到的那样

，你的 JSON 序列化程序正在将面向 C# 的名称（如 Name）（注意：首字母大写）转换为面向 JavaScript 的名称，如 name（注意：第一个字母为小写）：

[{"id"：1，"name"："jack"，"family"："bfd"，"age"：30}，{"id"：2，"name"："mr john"，"family"："sobhany"，"age"：36}]注意----^^^^^^

JavaScript 是一种区分大小写的语言，所以自然val.Name undefined因为val上没有Name属性;你想要val.name（以此类推，id、family、bfd、age......