jQuery adding class from json data

Question

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?

If I'm right about what you're asking you need to use two seperate, but equal length, arrays in tandem. Use the vanilla method for (i in jsondata.seats) and complete the HTML using jsondata.seats[i] and jsondata.seatPrice[i] — Popnoodles
– Popnoodles, Commented Mar 8, 2013 at 1:44
How can the information in seatPrice be a class? Even if you just assigned the string in there as a class, it would be invalid. — Jeff B
– Jeff B, Commented Mar 8, 2013 at 1:46
@JeffB B Nested if statements would be used to change what would be appended ie if (i==" "){ //append "blank" to class// } etc — Jordan Moffat
– Jordan Moffat, Commented Mar 8, 2013 at 1:48
Makes sense now. I didn't see that you were indexing into the string as well. See my answer below. — Jeff B
– Jeff B, Commented Mar 8, 2013 at 2:10

Jeff B · Accepted Answer · 2013-03-08 02:06:45Z

1

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/

answered Mar 8, 2013 at 2:06

Jeff B

30.1k7 gold badges64 silver badges91 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jordan Moffat Over a year ago

This works in my Fiddle, but for some reason not in my actual document, and it's not throwing any errors... Strange one, but I'll work with it. Thanks!

darko · Accepted Answer · 2013-03-08 02:20:33Z

0

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

edited Mar 8, 2013 at 2:20

answered Mar 8, 2013 at 2:03

darko

2,4589 gold badges42 silver badges54 bronze badges

1 Comment

Jeff B Over a year ago

Except for you are adding two elements. The OP wants one element using data from both seats and seatPrice. Also, you are using i for your first index, and then using v.

Collectives™ on Stack Overflow

jQuery adding class from json data

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related