0

我正在尝试遍历这个 JSON 来创建一个表。JSON 中有 3 个元素，即席位、行数和席位价格。每个 td 需要有一个基于行的 id 以及沿行的距离（即，每个数字 1 是一个座位，因此需要将计数添加到它们）。它还必须将 pricelookup 数据添加为一个类，以便单击的座位可以有不同的价格。 

var data =     {
    "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
    ]
}

$(data.seats).each(function (index, element) {
$('#plan').append('<tr><td> ' + element[0] + ' </td></tr>');
})

到目前为止，它只创建了第一列，只创建了座位布局，而不是其他数据。任何帮助，将不胜感激。我的主要问题是试图让它同时适用于行和列。

4

1 回答 1

1

我将如何解决这个问题：

  1. 将所有数据解析成自己的数据结构
  2. 使用自己的数据结构生成视图

有几种方法可以做到 #1，但一种快速而肮脏的处理方法是让一个对象保存一个 Row，该对象将保存一堆 Seat 对象，并且您的 Rows 存在于“座位表”中的事件结构中财产。为了得到幻想，你可以进一步抽象出来，有一个有座位和行的场地，然后活动有定价等等，但我们会很简单！

对于#2，你可以用一百万种方法来做这件事，但是通过保持解析模型和绘图分开，你可以很容易地改变它的显示方式。

所以给定上面的 JSON，我们可以很容易地创建我们的事件和绘图代码：

// function that retuns an "event" object with a seating model
var event = function (data) {
    // so we can get price information...
    var priceLookup = data.priceLookup;
    // helper function to create an empty, named row
    var createRow = function (rowName) {
        return {
            name: rowName,
                seats: []
        };
    };
    // helper function to make a seat object
    var createSeat = function(seatNumber, index, priceCode, booked) {
        return {
            price: priceLookup[priceCode],
                seatNumber: seatNumber, // the nth seat in the row
                index: index, // we might have empty spaces before us...
                reserved: booked
        };
    };

    // function that combines all our data into one structure
    var createSeating = function(data) {
        var rows = [], i;
        // for every row in our data set...
        for (i = 0; i < data.seats.length; i++) {
            console.log("Creating row number %d, which is row %s", i, data.rows[i]);
            var row = createRow(data.rows[i]); // make a row with the right name
            // now iterate over every position in the 'seats' string and make seats 
            // and create a counter for what the number of the actual seat is...
            var seatCount = 0;
            for (var s = 0; s < data.seats[i].length; s++) {
                console.log("Looking for a seat at index %d", s);
               var seatStr = data.seats[i].charAt(s); 
               if (seatStr === "1" || seatStr === "a") { // we are a seat!
                   console.log("... and we found one!");
                   seatCount += 1;
                   var booked = seatStr === "a";
                   // create a Seat and add it to our row
                   row.seats.push(createSeat(seatCount, s, data.seatPrice[i].charAt(s), booked));
               }

            }
            // add our row to the rows array
            rows.push(row);
        }
        return rows;

    };
    // create and return an object that describes our event
    return {
        venue: data.where,
        eventTime: data.when,
        performer: data.who,
        name: data.what,
        seating: createSeating(data)
    }
}

// this function takes the "seating" of an Event and can draw it
var drawSeating = function(seating) {
    // an array of ROW objects
    for (var i = 0; i < seating.length; i++) {
        row = seating[i];
        console.log("Drawing row %s", row.name);
        // now iterate over our seats...
        for (var s = 0; s < row.seats.length; s++) {
            var seat = row.seats[s];
            console.log("Drawing seat number %d which is at index %d and costs %s", seat.seatNumber, seat.index, seat.price);
            // you could output a view with all the relevant information in DATA attributes
            // like: <div class="seat" data-row="row.name" data-seatnum="seat.seatNumber" data-price="seat.price"  data-reserved="seat.reserved">
            // and use the index of the current seat and the index of the previously draw
            // seat to add spacing as needed.
        }
    }
};


// get an event model given our data
var myEvent = event(data);

// now we can draw it's seating chart!
drawSeating(myEvent.seating);

// add other methods to draw ui like
// drawPageheader(myEvent)
// or what have you.

我实际上并没有在那里为您完整地绘制视图，但是您可以在评论中看到如何将 HTMLdata属性添加到您最终用来绘制实际座位以包含所有相关数据的任何元素。您还可以根据行和座位索引生成 ID。

编辑：您评论了图表中“a”的含义，因此我进行了修改以包括

于 2013-03-07T19:05:39.500 回答