我正在尝试迭代这个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>');
})
到目前为止，它只创建了第一列，只创建了seatlayout，而不是其他数据。任何帮助，将不胜感激。我的主要问题是试图让它与行和列一起工作。
答案 0 :(得分：1)
我将如何处理这个问题：
有几种方法可以做＃1，但处理这个问题的一种快速而肮脏的方法是让一个对象持有一个Row，它可以容纳一堆Seat对象，并且你的Rows生活在一个事件结构中。座位表“财产。为了获得幻想，你可以进一步抽象出来，并有一个有座位和行的Venue，然后事件有定价等等，但我们会很简单！
对于＃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.
我实际上并没有在那里完整地为您绘制视图，但您可以在评论中看到如何将HTML data属性添加到您最终使用的任何元素中以绘制实际的座位以包含所有相关数据。您还可以根据行和座位索引生成ID。