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",
      },

Where are you calling `makeInvite` and `buildQuestionToScreen`? — Sandeep Nayak, Oct 15 '15 at 03:43
You need to make sure that the `makeInvite` and `buildQuestionToScreen` are called after the ajax request is completed — Arun P Johny, Oct 15 '15 at 03:43
I'm voting to close this question as off-topic because it is a duplicate of http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call — Arun P Johny, Oct 15 '15 at 03:44
where are `['l']` , `['p']` and `['r']` indexes comming from? — Kiyarash, Oct 15 '15 at 03:53
@loremIpsum1771: and where are you calling those methods which actually `add the contents of the arrays to a div on the page`? — Sandeep Nayak, Oct 15 '15 at 05:30
@SandeepNayak I tried calling ```buildQuestionToScreen()``` and ```makeInvite()``` after the ajax call but it's still not working — loremIpsum1771, Oct 15 '15 at 05:36
@loremIpsum1771: You should call them inside your success method — Sandeep Nayak, Oct 15 '15 at 05:37
@SandeepNayak Ok, just tried that but it didn't work...Does the code look correct though? I think that the problem maybe with how the jQuery is used in the ```buildQuestionToScreen()``` function, but if the code looks right than, I'm not really sure. — loremIpsum1771, Oct 15 '15 at 05:43

Ahmad Baktash Hayeri · Accepted Answer · 2015-10-15T07:27:08.733

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

edited Oct 15 '15 at 07:27

answered Oct 15 '15 at 06:28

Ahmad Baktash Hayeri

5,802
4
30
43

Thanks, the error seems to have gone away now. But I'm getting the error that $inviteObj is undefined when in the buildQuestionToScreen() function when its clearly defined there. Do you know what the problem might be? – loremIpsum1771 Oct 15 '15 at 14:34
You're welcome... What is the log in console when you reach `$inviteObj`? – Ahmad Baktash Hayeri Oct 15 '15 at 15:00
I just left out the "$" before the append to ```$inviteobj``` so it was undefined – loremIpsum1771 Oct 15 '15 at 15:56
1

I think the variable in the line `$inviteObj.appendTo($("#container"));` should be either as `$(inviteObj)` or simply `inviteObj`. – Ahmad Baktash Hayeri Oct 15 '15 at 16:03

Javascript array elements not being displayed in div tag

EDIT-Here is the relevant part of the JSON file being read from:

1 Answers1