Angular JS, javascript, jquery: How to display the keys and values form json object

Tuesday, March 18, 2014

How to display the keys and values form json object

<!DOCTYPE html>
<html>
<body>

<table>
<tbody id="tbody"></tbody>
</table>

<script>
var obj = [{ "key": "apple", "value": 1.90},
{ "key": "berry", "value": 1.7},
{ "key": "banana", "value": 1.5},
{ "key": "cherry", "value": 1.2}
];

var globalCounter = 0;
var tbody = document.getElementById('tbody');
for (var i = 0; i < Object.keys(obj).length; i++) {
var tr = "<tr>";
if (obj[i].value.toString().substring(obj[i].value.toString().indexOf('.'), obj[i].value.toString().length) < 2) obj[i].value += "0";

tr += "<td>" + obj[i].key + "</td>" + "<td>$" + obj[i].value.toString() + "</td></tr>";
tbody.innerHTML += tr;
}
alert(object.keys(obj).length); // To find the length of the array
</script>

</body>
</html>