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

Question

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

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

<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 不是对象 - 它是一个包含一个对象的数组。您需要使用 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>

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

JavaScript gives undefined value from JSON array

html

javascript

arrays

json

undefined