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

【问题标题】：JavaScript gives undefined value from JSON arrayJavaScript 从 JSON 数组中给出未定义的值
【发布时间】：2021-01-23 18:56:53
【问题描述】：

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

我想用这些值填充 HTML 表格。这是代码sn-p：

<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 究竟是如何工作的？

【问题讨论】：

在函数中使用data之前，你是在解析吗？
console.log(dataExchange) 在控制台中输出什么？字符串还是对象？

标签： javascript html arrays json undefined

【解决方案1】：

data[i].team 不是一个对象 - 它是一个带有一个对象的 array。你需要使用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;
  }
}

【讨论】：

【解决方案2】：

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

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

【讨论】：