Saat ini aplikasi lebih banyak dikembangkan dalam bentuk web app dan menggunakan JSON sebagai pertukaran datanya. Return Value dalam bentuk JSON dapat kita olah secara praktis bila menggunakan function map untuk mengurangi proses looping array pada java script.
Pada aplikasi https://softscients.com/stocks sebenarnya merupakan aplikasi berbasis micro service yang didalamnya banyak memanggil API, salah satunya yaitu API https://softscients.com/stocks/index.php/idx/getStock2/ yang berguna untuk mendapatkan informasi harga saham.
Mari kita coba memanggil API diatas dan disajikan dalam bentuk tabel di web menggunakan jquery, boostrap, dan bootstrap table. Hal yang pertama kita lakukan yaitu menambahkan CSS dan Java script diatas pada kode HTML. Berikut beberapa library yang diperlukan
- jquery untuk mengurusi ajax
- bootstrap untuk thema
- bootstrap table untuk table
Library JS
<html lang="en">
<head>
<!-- sisipkan jquery -->
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<!-- Menyisipkan table
https://bootstrap-table.com
-->
<script src="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.js"></script>
<link href="https://unpkg.com/bootstrap-table@1.21.2/dist/bootstrap-table.min.css" rel="stylesheet">
<!-- Menyisipkan Bootstrap -->
<link rel="stylesheet" href="https://softscients.com/stocks/assets/bootstrap/css/bootstrap.min.css" />
</head>
<body>
</body>
</html>
Component Bootstrap Table
Tahap selanjutnya yaitu membuat tabel untuk menampung hasil JSON yang diletakan pada tag Body dengan id=table1
<body>
<h3>Harga Saham</h3>
<div style="height: 700px; fluid-width: 900px;">
<table id="table1" data-toggle="table" data-toolbar=".toolbar" data-sortable="true">
<thead>
<tr>
<th data-field="date">Date</th>
<th data-field="stockcode">Stock Code</th>
<th data-field="open">Open</th>
<th data-field="high">High</th>
<th data-field="low">Low</th>
<th data-field="close">Close</th>
<th data-field="volume" data-sortable="false" data-align="right">Volume</th>
<th data-field="value" data-sortable="false" data-align="right">Value</th>
<th data-field="frequency" data-sortable="false" data-align="right">Frequency</th>
</tr>
</thead>
</table>
</div>
</body>
AJAX dan API untuk Stock
Langkah selanjutnya yaitu memanggil ajax serta serta mengolah JSON menggunakan function map dan assign table diatas, buat script dibawah tag </body> agar lebih rapi
<script>
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2)
month = '0' + month;
if (day.length < 2)
day = '0' + day;
return [year, month, day].join('-');
}
$(document).ready(function() {
let start = '20200101';
let end = '20231201'
let url = 'https://softscients.com/stocks/index.php/idx/getStock2/BBRI-'+start+'-'+end;
$.getJSON(url,function (response) {
let data = response[0];
let ohc = data.map(function (a, index, array) {
let final = {
'date': formatDate(a.ohlcv.date),
'stockname':a.ohlcv.stockname,
'close':a.ohlcv.close.toLocaleString(2),
'open':a.ohlcv.open.toLocaleString(2),
'high':a.ohlcv.high.toLocaleString(2),
'low':a.ohlcv.low.toLocaleString(2),
'volume':a.ohlcv.volume.toLocaleString(2),
'value':a.ohlcv.value.toLocaleString(2),
'frequency':a.ohlcv.frequency.toLocaleString(2),
'stockcode': a.ohlcv.stockcode
};
return final;
});
$('#table1').bootstrapTable("destroy");
$('#table1').bootstrapTable(
{
data: ohc,
sortStable: true,
pagination : true,
search : true
});
});
});
</script>
Perhatikan baris kode berikut dibawah ini yang menggunakan function map untuk melooping JSON
let ohc = data.map(function (a, index, array) {
let final = {
'date': formatDate(a.ohlcv.date),
'stockname':a.ohlcv.stockname,
'close':a.ohlcv.close.toLocaleString(2),
'open':a.ohlcv.open.toLocaleString(2),
'high':a.ohlcv.high.toLocaleString(2),
'low':a.ohlcv.low.toLocaleString(2),
'volume':a.ohlcv.volume.toLocaleString(2),
'value':a.ohlcv.value.toLocaleString(2),
'frequency':a.ohlcv.frequency.toLocaleString(2),
'stockcode': a.ohlcv.stockcode
};
return final;
});
Simpan kode diatas dengan nama index.html dan kemudian buka menggunakan browser maka akan tampil sebagai berikut
Sangat menarik dan praktis bukan? Function Map pada Java Script untuk Looping Array JSON