<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table id="reportItems"> <thead> <tr> <th>ReportItem</th> <th>Column</th> </tr> </thead> <tbody> </tbody> </table>

table { background: #DDD; } thead tr { background: #9D9; } tbody tr:nth-child(2n) { background: #CFC; } tbody tr:nth-child(2n+1) { background: #EFE; } th, td { width: 100px; padding: 0.2em; text-align: center; }

var jsonDataUrl = 'http://cors.io/?u=https://dax-rest.comscore.eu/v1/reportitems.json?client=belasting&user=gortc01&password=ComScore56&itemid=27&startdate=yesterday&site=belastingdienst'; $(document).ready(function () { $.getJSON(jsonDataUrl, function (data) { console.log(data); }); }); function addRows(table, data, fields) { var tbody = table.find('tbody'); $.each(data, function(i, item) { tbody.append(addRow(item, fields)); }); return tbody; } function addRow(item, fields) { var row = $('<tr>'); $.each(fields, function(i, field) { row.append($('<td>').html(item[field])); }); return row; }