Displaying MongoDB Documents with HTML

Question

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.

 <!DOCTYPE html>
 <html>
  <head>
    <head>
    <title>Invoice Report</title>
    <style type="text/css">
     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}
    </style>
    <script type="text/javascript">
    var itemRe = /item*/;
    }
    </script>
   </head>
  </head>
  <body>
     <div class="invoice">

      <h4>Order Form:</h4>
<table border="1">
<tr>
  <th>Name:</th>
  <td>{{rows['name']}}</td>
</tr>
<tr>
  <th>Created:</th>
  <td>{{rows['created']}}</td>
</tr>
<tr>
  <th>Phone:</th>
  <td>{{rows['phone']}}</td>
</tr>
<tr>
  <th>Email:</th>
  <td>{{rows['email']}}</td>
</tr>
<tr>
  <th>Item:</th>
  <td>{{rows['item']}}</td>
  </tr>
</div>
  <tr>
    <th>Quantity:</th>
    <td>{{rows['qty']}}</td>
  </tr>
  <tr>
    <th>Color:</th>
    <td>{{rows['color']}}</td>
  </tr>
  <tr>
    <th>Quote:</th>
    <td>{{rows['quote']}}</td>
  </tr>

</table>
     </div>


  </body>
 </html>

It would probably be better to create the entire table dynamically, but I am not sure where the proper place to do this is

in a javascript function within the HTML file?
Or maybe in the pymongo file which maintains the info in the mongodb database?

The python code which handles sending the mongodb document to the HTML form uses a python Bottle template.

@bottle.route('/view/<_id>', 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)

I greatly appreciate any help that someone may be able to offer! =)

score 2 · Accepted Answer · answered Jul 25 '13 at 13:00

Looking over the documentation for the bottle template engine, it looks like you can use 'ifs' and 'fors' to accomplish this.

For instance, if you order is stored at rows['orders'] and you don't know how many there are, in your template you can place:

%for item in rows['orders']:
  <td>{{item}}</td>
%end

or say that you need to display a special warning if your customer is ordering an item that is frequently on backorder, and you've passed in another variable, 'backorder', that specifies this:

%if backorder:
  <span>This item is frequently on backorder</span>
%end

I haven't tested either of these, but I've done similar things using the Django and Flask template engines. I pulled these samples from here:

http://bottlepy.org/docs/dev/tutorial.html#templates

and the 'Bottle Template to Format the Output' section here:

http://bottlepy.org/docs/dev/tutorial_app.html#using-bottle-for-a-web-based-todo-list

Hope this helps!

Displaying MongoDB Documents with HTML

1 Answers1

Linked