title: Displaying MongoDB Documents with HTML
body: <p>I am trying to create an HTML table to display the contents of a mongodb collection.  The collection contains data about different customer orders from a small business.  Some of the data will always exist in a given document, for example the customer name and phone number.  However, some of the pieces of data within each document need to vary, such as items ordered since one customer may order 1 item, while another may order 3 items.  So, if I have a mongodb collection with documents that contain an arbitrary number fields in each document, how can I dynamically add them to an HTML table to display the document's contents? As an example of the type of display I am looking for, here is the hard-coded HTML for the fields which I know will remain constant.</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html&gt;
    &lt;head&gt;
      &lt;head&gt;
      &lt;title&gt;Invoice Report&lt;/title&gt;
      &lt;style type="text/css"&gt;
       body {font-family:sans-serif;color:#4f494f;}
       form input {border-radius: 7.5px;}
       h5 {display: inline;}
       .label {text-align: right}
       .ordersBook {float:left; padding-top: 10px;}
       .name {width:100%;float:left; padding:3px;}
       .wrapper { padding-left: 25px; padding-top: 20px}
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
      var itemRe = /item*/;
      }
      &lt;/script&gt;
     &lt;/head&gt;
    &lt;/head&gt;
    &lt;body&gt;
       &lt;div class="invoice"&gt;
  
        &lt;h4&gt;Order Form:&lt;/h4&gt;
  &lt;table border="1"&gt;
  &lt;tr&gt;
    &lt;th&gt;Name:&lt;/th&gt;
    &lt;td&gt;{{rows['name']}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Created:&lt;/th&gt;
    &lt;td&gt;{{rows['created']}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Phone:&lt;/th&gt;
    &lt;td&gt;{{rows['phone']}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Email:&lt;/th&gt;
    &lt;td&gt;{{rows['email']}}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;th&gt;Item:&lt;/th&gt;
    &lt;td&gt;{{rows['item']}}&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/div&gt;
    &lt;tr&gt;
      &lt;th&gt;Quantity:&lt;/th&gt;
      &lt;td&gt;{{rows['qty']}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Color:&lt;/th&gt;
      &lt;td&gt;{{rows['color']}}&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;th&gt;Quote:&lt;/th&gt;
      &lt;td&gt;{{rows['quote']}}&lt;/td&gt;
    &lt;/tr&gt;
  
  &lt;/table&gt;
       &lt;/div&gt;
  
  
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>It would probably be better to create the entire table dynamically, but I am not sure where the proper place to do this is</p>
  
  <ul>
  <li>in a javascript function within the HTML file?</li>
  <li>Or maybe in the pymongo file which maintains the info in the mongodb database?</li>
  </ul>
  
  <p>The python code which handles sending the mongodb document to the HTML form uses a python Bottle template.</p>
  
  <pre><code>@bottle.route('/view/&lt;_id&gt;', method = 'GET')
  def show_invoice(_id):
      client = pymongo.MongoClient("mongodb://localhost")
      db = client.orders
      collection = db.myorders
      from bson.objectid import ObjectId
      result = collection.find_one({'_id': ObjectId(_id)})
      return bottle.template('invoice', rows = result)
  </code></pre>
  
  <p>I greatly appreciate any help that someone may be able to offer! =)</p>