JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<!-- Price Comparison API by Pricetree.com
Written by @vikashrathee : https://twitter.com/vikashrathee -->
<table class="table">
<thead>
<tr class="info">
<th>Store Name</th> <th>Price</th> <th>URL</th>
</tr>
</thead>
<tbody id="price-list">
<!-- Data will be appended here -->
</tbody>
</table>
CSS
.table thead tr.info > th {
background-color: #ddd;
}
JavaScript
var itemTemplate = '<tr><td class="store"><strong>{{storename}}</strong></td><td class="price">Rs. {{price}}</td><td class="uri"><a target="_blank" href="{{uri}}">Go to Store</a></td></tr>';
var collection = '';
function OnSuccess(data) {
// do something with the data
var element = '';
for (i = 0; i < data.count ; i++) {
element = itemTemplate.replace(/{{storename}}/g, data.data[i].Seller_Name);
element = element.replace(/{{price}}/g, data.data[i].Best_Price);
element = element.replace(/{{uri}}/g, data.data[i].Uri);
collection += element;
}
$('#price-list').html(collection);
}
$.ajax({
type: "GET",
url: "http://www.pricetree.com/dev/api.ashx?pricetreeId=4334&apikey=7770AD31-382F-4D32-8C36-3743C0271699&v=1",
dataType: "json",
success: OnSuccess
});