JavaScript 从 JSON 数组中给出未定义的值

Question

我是 JS 新手，遇到问题，无法解决。 我用 Java SE、Jersey 和 Jackson 编写了一个后端。 一切都很好。 我的 REST 端点正在运行。 但我不知道如何引用 json 数组 object。 “时间”值工作正常。 “团队”的数组总是说“未定义”。

我想用这些值填充 HTML 表。 这是代码片段：

<script>
    var dataExchange = []

    $.ajax({
        method:'GET',
        url:'http://localhost:8080/api/calendar',
        success:function(response){
            dataExchange = response
            buildTable(dataExchange)
            console.log(dataExchange)
        }
    })

    function buildTable(data){
        var table = document.getElementById('eventTable')

        for (var i = 0; i < data.length; i++){

             var row = `<tr>
                            <td>${data[i].dateOfEvent}</td>
                            <td>${data[i].team.teamName}</td> <---Here is the problem
                      </tr>`
             table.innerHTML += row
        }
    }
</script>

那就是来自后端的 JSON ：

[{"dateOfEvent":"2019-07-18T18:30","team":[{"teamName":"Salzburg"}]},{"dateOfEvent":"2019-07-18T18:30","team":[{"teamName":"Sturm"}]},{"dateOfEvent":"2019-10-23T09:45","team":[{"teamName":"Capitols"}]},{"dateOfEvent":"2019-10-23T09:45","team":[{"teamName":"KAC"}]}]

请，谁能解释我在这里做错了什么以及这与 JavaScript 究竟如何工作？

Answer 1

data[i].team不是 object - 它是一个包含一个 object 的数组。 您需要使用data[i].team[0].teamName ：

function buildTable(data) {
  var table = document.getElementById('eventTable');

  for (var i = 0; i < data.length; i++) {
    var row = `<tr>
                 <td>${data[i].dateOfEvent}</td>
                 <td>${data[i].team[0].teamName}</td>
               </tr>`
    table.innerHTML += row;
  }
}

Answer 2

根据您的json它必须是这样的：

<td>${data[i].team[0].teamName}</td>