CODEWITHSUNDEEP
javascriptjqueryjsonclassobject
Jordan Moffat
Jordan Moffat

Reputation: 337

jQuery adding class from json data

This is a json file containing seat information. 

var jsondata = {
    "who": "RSNO",
    "what": "An American Festival",
    "when": "2013-02-08 19:30",
    "where": "User Hall - Main Auditorium",
    "seats": ["00000000000000000011111111111111000000000000000000", "0000000000000001111111111111111aaa0000000000000000", "00000000000000aa111111111111111aaaaa00000000000000", "00000000000001111111111111111111111111000000000000", "000000000aa00aaaaaaaaaaaaaaaaaaaaaa1100aa000000000", "00000001111001111111111111111111111100111100000000", "00000aaaaaa0011aaaaaaaaa11111111aaa1100aaaaaa00000", "00001111111001111111111111111111111100111111100000", "000aaaaaaa110011111111111111111111110011aaaaaaa000", "00111111111100111111111111111111111001111111111000", "00aaaaa1111110011111111111111111111001111aaaaaaa00", "11111111111100111111111111111111111001111111111110", "0aaaaaaaaaaaa001111111111111111111100aaaaaaaaaaaa0", "01111111111110011111111111111111110011111111111100", "00000000000000001111111111111111110000000000000000", "01111111111111001111111111111111100111111111111100", "01111111111111001111111111111111110011111111111110", "01111111111111001111111111111111100111111111111100", "00a11111111111100111111111111111100111111111111a00", "00111111111111100111111111111111001111111111111000", "00011111111111110011111111111111001111111111111000", "00111111111111100111111111111111001111111111111000", "00011111111111110011111111111111001111111111111000", "00011111111111110011111111111110011111111111110000", "0000000111a111111001111a1111a110011111111110000000", "00000000111111110011111111111110011111111000000000", "00000000001111111001111111111110011111110000000000", "00000000000000111001111111111100111000000000000000"],
    "rows": ["DD", "CC", "BB", "AA", "Z", "Y", "X", "W", "V", "U", "T", "S", "R", "Q", "P", "N", "M", "L", "K", "J", "H", "G", "F", "E", "D", "C", "B", "A"],
    "seatPrice": ["                  00000000000000                  ", "               0000000000000000000                ", "              0000000000000000000000              ", "             0000000000000000000000000            ", "         00  000000000000000000000000  00         ", "       0000  00000000000000000000000  0000        ", "     000000  000000000000000000000000  000000     ", "    0000000  00000000000000000000000  0000000     ", "   000000000  0000000000000000000000  000000000   ", "  0000000000  000000000000000000000  0000000000   ", "  00000000000  00000000000000000000  00000000000  ", "000000000000  000000000000000000000  000000000000 ", " 000000000000  00000000000000000000  000000000000 ", " 000000000000  0000000000000000000  000000000000  ", "                000000000000000000                ", " 0000000000000  00000000000000000  0000000000000  ", " 0000000000000  000000000000000000  0000000000000 ", " 0000000000000  00000000000000000  0000000000000  ", "  0000000000000  0000000000000000  0000000000000  ", "  0000000000000  000000000000000  0000000000000   ", "   0000000000000  00000000000000  0000000000000   ", "  0000000000000  000000000000000  0000000000000   ", "   0000000000000  00000000000000  0000000000000   ", "   0000000000000  0011111111100  0000000000000    ", "       0000000000  111111111111  0000000000       ", "        00000000  1111111111111  00000000         ", "          0000000  111111111111  0000000          ", "              000  00000000000  000               "],
    "priceLookup": [10, 20] 
};


$.getJSON('jsondata' , function(data) {
    var tbl_body = "";
    $.each(jsondata.seats, function() {
        var tbl_row = "";
        $.each(this, function(k , v) {
            tbl_row += "<td>"+v+"</td>";
        });
        tbl_body += "<tr>"+tbl_row+"</tr>";                 
    });
    $("#plan").html(tbl_body);
});

The function at the end works fine in terms of using the seat layout, however, I need to add the information held in seatPrice as the class of the tds generated from the function. I've tried essentially copying the last function but for the seatPrice object and appending it to the table, but this doesn't seem to work. Any suggestions as to how I would go about this?

Upvotes: 0

Views: 1486

Answers (2)

darko
darko

Reputation: 2458

It seems like you're use of $.each() to loop is complicating the problem. As popnoodles said, you can use a vanilla for loop.

Is something like this what you're going for?

$.getJSON('jsondata' , function(data) {
    var tbl_body = "";
    var tbl_row = "";

    for (var i in data.seats){
        tbl_row += "<td>"+i+"</td>";
    }


    for (var i in data.seatPrice){
        tbl_row += '<td class="' + i + '">this is a td</td>';
    }

    tbl_body += "<tr>"+tbl_row+"</tr>";   

    $("#plan").html(tbl_body);
});

Upvotes: 0

Jeff B
Jeff B

Reputation: 30099

There are some issues with your code to begin. Why do you need to $.getJSON() if you already have the data in jsondata? If you are really getting this data from an AJAX call, that's fine, but you need to refer to data in the function, not jsondata, or rename the parameter to the anonymous function.

The first argument in the function passed to $.each() is the index of the array. You can use that to grab the seatPrice of the same index:

$.each(jsondata.seats, function (j, d) {
    var tbl_row = "";
    $.each(this, function (k, v) {
        var seatPrice = jsondata.seatPrice[j][k];
        var seatPriceClass = '';
        if(seatPrice == "0") {
             seatPriceClass = "notawesome";  
        } else if(seatPrice == "1") {
             seatPriceClass = "awesome";   
        } else {
             seatPriceClass = "none";   
        }
        tbl_row += "<td class='"+seatPriceClass+"'>" + v + "</td>";
    });
    tbl_body += "<tr>" + tbl_row + "</tr>";
});

Demo: http://jsfiddle.net/jtbowden/pJhgK/

Upvotes: 1

Related Questions