Function Map pada Java Script untuk Looping Array JSON

By | January 5, 2023
577 Views

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

See also  Time Sleep pada Looping Java Script dan Ubah Value Component HTML

Sangat menarik dan praktis bukan? Function Map pada Java Script untuk Looping Array JSON