title: Insert elements from array to table in jquery/js
body: <p>I have a js file called reservations.js, in this file I have an array of reservations, like:</p>
  
  <pre><code>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" }
  ];
  </code></pre>
  
  <p>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.</p>
  
  <blockquote>
    <p>Example: ReservNum": "0166977", So the number 0166977 will be in the
    first col Res. Number.</p>
  </blockquote>
  
  <p>My table is like this:</p>
  
  <pre><code>&lt;table id="reservations"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Res. Number&lt;/th&gt;&lt;th&gt;Guest Name&lt;/th&gt;&lt;th&gt;Status&lt;/th&gt;&lt;th&gt;Arrival Date&lt;/th&gt;&lt;th&gt;Departure Date&lt;/th&gt;&lt;th&gt;Room Type&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
              &lt;tr&gt;
                  &lt;td&gt;resnum&lt;/td&gt;&lt;td&gt;guestname&lt;/td&gt;&lt;td&gt;status&lt;/td&gt;&lt;td&gt;arrivaldate&lt;/td&gt;&lt;td&gt;departuredate&lt;/td&gt;&lt;td&gt;roomtype&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  </code></pre>
  
  <p>I don't know what how to do it.
  I have try to do somthing like this in the js file:</p>
  
  <pre><code>$('#reservations tr').each(function (i) {
      $(this).find('td').html(reservations[i]);
  });
  </code></pre>
  
  <p>But it is not working. (Maybe my html table is wrong or the js, or even both of them).</p>
  
  <p>I'm new in js/jquery so I'm a little unsure what I'm doing.</p>