Javascript数组元素没有显示在div标签中

Question

我创建了一个程序，用于读取音乐会事件的JSON数据。JSON文件有一个名为global的对象，其中包含乐队名称和地点。还有一个tickets对象，其中包含音乐会的所有可用门票，从中我可以获得票价、区域和排(代表座位)。当使用console.log()从解析的JSON中打印出特定属性时，我得到了正确的输出。我有一个函数，它将parsedJSON对象读入不同的数组(一个用于ticketInfo，另一个用于一般事件信息)。在另一个函数中，我使用一些jquery功能将数组的内容添加到页面上的div中，但是当页面加载时什么也不显示。我是新的jquery，所以我可能有一些简单的错误，这是导致问题，但谁能告诉哪里的代码是错误的?

相关代码如下:

<div id="container"> Container div  </div>
<script>
var concertData = {};
var eventInfo = {};
var ticketInfo = {};
function makeInvite() {
    var metaInfo = concertData['global'][0];
    eventInfo['venue'] = metaInfo['mapTitle'];
    eventInfo['band'] = metaInfo['productionName'];
    for (var i = 0; i < concertData['ticket'].length; i++) {
        var ii = concertData['ticket'][i];
        var temp = {
        'section': ii['l'],
        'price': ii['p'],
        'row': ii['r'],
    };
    ticketInfo[i] = temp;
    }
}
function buildQuestionToScreen() {
    var inviteObj = $('<div style="margin:20px"></div>');
    inviteObj.append(
    '<div>Invite a friend to see ' + eventInfo['band'] + '?</div>'
    );
    var $div = $("<div></div>");
    var $divLine = $("<tr></tr>");
    console.log(eventInfo['band']);
    var $table = $("<table></table>");
    for (var j = 0; j < ticketInfo.length; j++) {
        var $line = $("<tr></tr>");
        $line.append($("<td></td>").html(ticketInfo[j][0]));
        $line.append($("<td></td>").html(ticketInfo[j][1]));
        $line.append($("<td></td>").html(ticketInfo[j][2]));
        $table.append($line);
    }
    //$table.appendTo(document.body);
    $inviteObj.appendTo($("#container"));
    $table.appendTo($("#container"));
}
$.ajax({
    url: 'concertInfo.json',
    success: function(data){
        //console.log(data);
        concertData = data;
        makeInvite();
        buildQuestionToScreen();
        $(data.tickets).each(function(index, value){
                console.log(value.p);
        });
    }
})
</script>

edit -这是读取JSON文件的相关部分:

{
   "global": [
      {
         "dte": "1",
         "atp": "116.33",
         "lp": "74.00",
         "hp": "183.00",
         "listingCount": "3",
         "hq": "8",
         "vpcr": "exp0818",
         "mapTitle": "Terminal 5",
         "productionId": "1817728",
         "productionName": "Glass Animals",
         "eventId": "35873",
         "venueId": "5351",
         "zoned": "0",
         "staticMapUrl": "http://d2o50i5c2dr30a.cloudfront.net/e19c6a1e-f606-46df-82c2-230544edc2a5.jpg",
      }
   ],
   "tickets": [
      {
         "s": "GENERAL A..",
         "r": "GA6",
         "q": "1",
         "p": "74.00",
         "i": "VB916157659",
         "l": "GENERAL ADMISSION",
      },

Answer 1

我想问题是你分配的concertData变量返回字符串data，而不是解析JSON在你的AJAX调用。

试着改变下一行

concertData = data; 

concertData = JSON.parse(data);

或者，您可以为AJAX调用指定dataType属性(设置为'json')，而不是上面的调整。在这种情况下，"json"将请求的响应计算为json并返回一个JavaScript对象。

$.ajax({
url: 'concertInfo.json',
dataType: 'json',
success: function(data){
       concertData = data;
       makeInvite();
       buildQuestionToScreen();
   }
})