Question

我创建了一个程序来读取音乐会事件的JSON数据。 JSON文件有一个名为global的对象，它具有波段名称和场地。还有一个票证对象，其中包含音乐会的所有可用票证，我从中获得票价，部分和行（用于座位）。当使用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>

编辑 - 这是从以下位置读取的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，而不是在AJAX调用中分配解析的JSON。

尝试更改第

行之后的行

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();
   }
})

Javascript数组元素未显示在div标记

编辑 - 这是从以下位置读取的JSON文件的相关部分：

1 个答案: