javascript - Displaying MongoDB Documents with HTML

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! =)

 <!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! =)

Share Improve this question asked Jul 25, 2013 at 11:32 sreisman 6684 gold badges10 silver badges25 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Looking over the documentation for the bottle template engine, it looks like you can use 'ifs' and 'fors' to acplish 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/docs/dev/tutorial.html#templates

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

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

Hope this helps!

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Displaying MongoDB Documents with HTML - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)