Insert elements from array to table in jquery/js

Question

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.

xdazz · Accepted Answer · 2012-12-23 09:18:46Z

18

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

answered Dec 23, 2012 at 9:18

xdazz

161k38 gold badges255 silver badges278 bronze badges

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

4 Comments

shlomi Over a year ago

In the demo it look good, but it's doesn't work in my project (I'm working on microsoft visual web developer 2010 express)

shlomi Over a year ago

This is my project: The js file is: tinypic.com/r/f0tmt/6 The html is: tinypic.com/view.php?pic=2rxv5at&s=6 But what I see on screen is this: tinypic.com/r/nbf9mo/6 Maybe i'm missing out somthing in here.. Thank you very much!!

shlomi Over a year ago

I have notice that the same thing is happen in the demo if I change it to javascript 1.7. maybe this is my problem. Do you have a solution for my question in js1.7? Thank you.

shlomi Over a year ago

OK I have managed, the problem was that I need this line in the begining of the js file: $(document).ready( function ()

Zaheer Ahmed · Accepted Answer · 2012-12-23 09:17:12Z

1

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.

answered Dec 23, 2012 at 9:17

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

1 Comment

Sachin Shah Over a year ago

Thanks @Zaheer It really helped me and works fine for me :)

asgoth · Accepted Answer · 2012-12-23 09:25:19Z

1

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

answered Dec 23, 2012 at 9:25

asgoth

35.8k12 gold badges91 silver badges98 bronze badges

Comments

Eugeny89 · Accepted Answer · 2012-12-23 09:23:47Z

0

I suggest using jquery.tmpl method.

In HTML

<script id="template-table" type="text/x-jquery-tmpl">
        <tr>
            <th>Res. Number</th><th>Guest Name</th><th>Status</th><th>${Arrival}</th><th>${Departure}</th><th>Room Type</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>${ReservNum}</td><td>${Guest_Name}</td><td>${Status}</td><td>arrivaldate</td><td>departuredate</td><td>${Type}</td>
        </tr>
    </tbody> 
</script>

In JS:

var reservations = [...];
$("#template-table").tmpl(reservations);

answered Dec 23, 2012 at 9:23

Eugeny89

3,76310 gold badges55 silver badges105 bronze badges

Collectives™ on Stack Overflow

Insert elements from array to table in jquery/js

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related