Edit The Code:
See Result »
Try it Yourself - ©
w3ii.com
<!DOCTYPE html> <html> <link rel="stylesheet" href="/lib/w3.css"> <script src="../lib/w3data.js"></script> <body> <table id="id01" class="w3-table w3-bordered w3-striped"> <tr> <th>Title</th> <th>Artist</th> <th>Price</th> </tr> <tr w3-repeat="cd"> <td>{{title}}</td> <td>{{artist}}</td> <td>{{price}}</td> </tr> <tr> <td></td> <td></td> <td>{{total}}</td> </tr> </table> <script> w3Http("cd_catalog.js", function () { if (this.readyState == 4 && this.status == 200) { var myObject = JSON.parse(this.responseText); myController(); w3DisplayData("id01", myObject); } function myController() { var i; var x; var total = 0; var myArray = myObject["cd"]; for (i = 0; i < myArray.length; i++) { total += Number(myArray[i]["price"]); } myObject["total"] = total.toFixed(2); } }); </script> </body> </html>