I have a js file called reservations.js, in this file I have an array of reservations, like:
var reservations = [
{ "HotelId": "01", "HotelName": "SPA", "ReservNum": "0166977", "Guest Name": "Jonny", "Room": null, "Type": "SUIT", "Rooms": "1", "Board": "BB", "Status": "IH", "Pax": "2,0,0,0", "Arrival": "07/08/12", "Departure": "09/08/12", "AgentDesc": "FIT", "AgentCode": "FIT", "Group": null, "Balance": "0", "Requests": "", "Remarks": null, "Fit/Group": "FIT", "ReturnGuestName": "", "StatusColor": "LightCoral" },
{ "HotelId": "01", "HotelName": "SPA", "ReservNum": "H000192", "Guest Name": null, "Room": null, "Type": "Folio", "Rooms": "0", "Board": "", "Status": "IH", "Pax": "0,0,0,0", "Arrival": "07/08/12", "Departure": "10/09/12", "AgentDesc": "movies", "AgentCode": "001", "Group": null, "Balance": "0", "Requests": "", "Remarks": "", "Fit/Group": "FIT", "ReturnGuestName": "", "StatusColor": "LightCoral" }
];
What I need to do is to create a table(in html) with 6 colomns: Res. Number, Guest Name, Status, Arrival Date, Departure Date, Room Type. and insert the element from the array into the matching col in the table.
Example: ReservNum": "0166977", So the number 0166977 will be in the first col Res. Number.
My table is like this:
<table id="reservations">
<thead>
<tr>
<th>Res. Number</th><th>Guest Name</th><th>Status</th><th>Arrival Date</th><th>Departure Date</th><th>Room Type</th>
</tr>
</thead>
<tbody>
<tr>
<td>resnum</td><td>guestname</td><td>status</td><td>arrivaldate</td><td>departuredate</td><td>roomtype</td>
</tr>
</tbody>
</table>
I don't know what how to do it. I have try to do somthing like this in the js file:
$('#reservations tr').each(function (i) {
$(this).find('td').html(reservations[i]);
});
But it is not working. (Maybe my html table is wrong or the js, or even both of them).
I'm new in js/jquery so I'm a little unsure what I'm doing.
Something like below (Check the working demo):
var tbody = $('#reservations tbody'),
props = ["ReservNum", "Guest Name", "Status", "Arrival", "Departure", "Type"];
$.each(reservations, function(i, reservation) {
var tr = $('<tr>');
$.each(props, function(i, prop) {
$('<td>').html(reservation[prop]).appendTo(tr);
});
tbody.append(tr);
});
I'm not sure if is this that you want but there is jqGrid. It can receive JSON and make a grid.
Or You can also use this simple project on Github : Json-To-HTML-Table
Or you can also make your own using jQuery will make this simpler.
The following will take an array of arrays and store convert them into rows and cells.
$.getJSON(url , function(data) {
var tbl_body = "";
$.each(data, function() {
var tbl_row = "";
$.each(this, function(k , v) {
tbl_row += "<td>"+v+"</td>";
})
tbl_body += "<tr>"+tbl_row+"</tr>";
})
$("#target_table_id tbody").html(tbl_body);
});
You could add a check for the keys you want to exclude by adding something like
var expected_keys = { key_1 : true, key_2 : true, key_3 : false, key_4 : true };
at the start of the getJSON cbf and adding
if ( ( k in expected_keys ) && expected_keys[k] ) {
...
}
around the tbl_row += line.
Like this:
$('#reservations tr').each(function (i) {
var td = $(this).find('td');
td.html(reservations[i]['ReservNum']);
td = td.next();
td.html(reservations[i]['Guest Name']);
td = td.next();
td.html(reservations[i]['Status']);
td = td.next();
td.html(reservations[i]['Arrival']);
td = td.next();
td.html(reservations[i]['Departure']);
td = td.next();
td.html(reservations[i]['Type']);
td = td.next();
td.html(reservations[i]['Rooms']);
td = td.next();
td.html(reservations[i]['Board']);
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With