0

この JSON を繰り返し処理してテーブルを作成しようとしています。JSON には、seats、rows、seatprice の 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を行うにはいくつかの方法がありますが、これを処理する手っ取り早い方法は、多数のSeatオブジェクトを保持するRowを保持するオブジェクトを用意することです.Rowは「座席表」のイベント構造に存在します財産。想像力を働かせるために、それをさらに抽象化して、座席と列を持つ Venue を作成し、Event に価格設定などを設定することもできますが、ここでは簡単に説明します。

#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.

私は実際にビューを完全に描画しませんでしたが、dataすべての関連データを含めるために、実際の座席を描画するために使用する要素に HTML 属性を追加する方法をコメントで確認できます。行と座席のインデックスに基づいて ID を生成することもできます。

編集：チャートで「a」が何を意味するかについてコメントしたので、それを含めるように変更しました

于 2013-03-07T19:05:39.500 に答える