arifh28/index.html

## index.html
<html>
    <head>
        <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
    </head>
    <body>
        <textarea></textarea>
        <table>
            <tr>
                <th rowspan="2">Nomor</th><th rowspan="2">Nama Instansi</th><th colspan="3">Laporan</th>
            </tr>
            <tr>
                <th>Belum</th><th>Proses</th><th>Selesai</th>
            </tr>
        </table>
    </body>
</html>

## javascript-menampilkan-data-json-ke-tabel-html.markdown

      
    Raw
  

              javascript-menampilkan-data-json-ke-tabel-html.markdown
            
          
    Javascript - Menampilkan data JSON ke Tabel HTML

menampilkan data JSON yang masih dalam bentuk object, menjadi data dalam bentuk tabel dalam dokumen html sehingga lebih mudah dibaca.
A Pen by andre on CodePen.
License.

  
## script.js
$.ajax({
    url         : "http://data.go.id/dataset/f44253ab-d2eb-4d2d-8e84-a24c8407910a/resource/01f14641-7437-4c31-bfa4-69efc436d6b4/download/statistik.json",
    type        : "GET",
    dataType    : "json",
    data        : {get_param : 'value'},
    success     : function(data){
        //menghitung jumlah data
        jmlData = data.length;

        //variabel untuk menampung tabel yang akan digenerasikan
        buatTabel = "";

        //perulangan untuk menayangkan data dalam tabel
        for(a = 0; a < jmlData; a++){

            //mencetak baris baru
            buatTabel += "<tr>"

                        //membuat penomoran
                        + "<td>" + (a+1) + "</td>"
                        //mencetak nama instansi
                        + "<td>" + data[a]["InstansiName"] + "</td>"
                        //mencetak jumlah laporan "belum"
                        + "<td>" + data[a]["belum"] + "</td>"
                        //mencetak jumlah laporan "proses"
                        + "<td>" + data[a]["proses"] + "</td>"
                        //mencetak jumlah laporan "selesai"
                        + "<td>" + data[a]["selesai"] + "</td>"
            //tutup baris baru
                + "<tr/>";
        }
        //menayangkan jumlah data
        document.getElementsByTagName('textarea')[0].value = jmlData;
        //mencetak tabel
        document.getElementsByTagName("table")[0].innerHTML += buatTabel;
    }
});

## style.css
table{
  border-collapse:collapse;
}
table th,
table td{
  border:1px solid;
  line-height:25px;
  padding:0 6px;
}
table th{
  background:#3498db;
}
	<html>
	<head>
	<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
	</head>
	<body>
	<textarea></textarea>
	<table>
	<tr>
	<th rowspan="2">Nomor</th><th rowspan="2">Nama Instansi</th><th colspan="3">Laporan</th>
	</tr>
	<tr>
	<th>Belum</th><th>Proses</th><th>Selesai</th>
	</tr>
	</table>
	</body>
	</html>
	$.ajax({
	url : "http://data.go.id/dataset/f44253ab-d2eb-4d2d-8e84-a24c8407910a/resource/01f14641-7437-4c31-bfa4-69efc436d6b4/download/statistik.json",
	type : "GET",
	dataType : "json",
	data : {get_param : 'value'},
	success : function(data){
	//menghitung jumlah data
	jmlData = data.length;

	//variabel untuk menampung tabel yang akan digenerasikan
	buatTabel = "";

	//perulangan untuk menayangkan data dalam tabel
	for(a = 0; a < jmlData; a++){

	//mencetak baris baru
	buatTabel += "<tr>"

	//membuat penomoran
	+ "<td>" + (a+1) + "</td>"
	//mencetak nama instansi
	+ "<td>" + data[a]["InstansiName"] + "</td>"
	//mencetak jumlah laporan "belum"
	+ "<td>" + data[a]["belum"] + "</td>"
	//mencetak jumlah laporan "proses"
	+ "<td>" + data[a]["proses"] + "</td>"
	//mencetak jumlah laporan "selesai"
	+ "<td>" + data[a]["selesai"] + "</td>"
	//tutup baris baru
	+ "<tr/>";
	}
	//menayangkan jumlah data
	document.getElementsByTagName('textarea')[0].value = jmlData;
	//mencetak tabel
	document.getElementsByTagName("table")[0].innerHTML += buatTabel;
	}
	});
	table{
	border-collapse:collapse;
	}
	table th,
	table td{
	border:1px solid;
	line-height:25px;
	padding:0 6px;
	}
	table th{
	background:#3498db;
	}