Javascript array elements not being displayed in div tag

Question

I've created a program that reads JSON data for a concert event. The JSON file has one object named global which has the band name and the venue. There is also a tickets object containing all of the available tickets for the concert, from which I am getting the ticket price, the section, and the row (for the seats). When using console.log() to print out specific attributes from the parsed JSON, I am getting the correct output. I have a function that reads the parsedJSON object into different arrays (one for ticketInfo and another for the general event info). In another function, I use some jquery functionality to add the contents of the arrays to a div on the page, but nothing is being displayed when the page loads. I'm new to jquery so I probably have some simple mistake which is causing the problem but can anyone tell where the code is wrong?

The relevant code is below:

<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-Here is the relevant part of the JSON file being read from:

{

   "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

I suppose the problem is that you are assigning the concertData variable the returned string data and not the parsed JSON in your AJAX call.

Try changing the line following line

concertData = data; 

to

concertData = JSON.parse(data);

Alternatively, instead of the above tweak, you can specify a dataType property (set to 'json') to your AJAX call. In this case, the "json" evaluates the response of your request as JSON and returns a JavaScript object.

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