21 Jan

เรียก API – ธนาคารแห่งประเทศไทย ด้วย jQuery

หลังจากที่ ธนาคารแห่งประเทศไทยเปิดให้มี api ได้ซักพัก ซึ่งมีอยู่ประมาณ 21 api เพื่อให้บริการข้อมูลต่างๆ ถือเป็นเรื่องดีที่ทำให้หน่วยงานอื่นๆ ได้เข้าถึงข้อมูลได้ง่ายและถูกต้องแม่นยำ ในวันนี้จะมาลองใช้ jQuery เรียก api ซึ่งเป็น java script

api ของทางธนาคารแห่งประเทศไทย เป็น REST ข้อมูล เป็น JSON ซึ่งเป็นมาตารฐานสากล สามารถใช้หลายภาษาดึงข้อมูลได้

เรามาดูตัวอย่างที่เสร็จแล้ว (ลองเลือกวันที่)

จากตัวอย่างผมเลือก api อัตราแลกเปลี่ยนเฉี่ย (รายวัน)  โดยการเลือกจากช่อง input date แล้วให้เรียกตามวันที่ ที่ user เลือกวัน

เรามาดู CODE และ การทำงาน (comment อธิบายใน code)

<!DOCTYPE html>
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
 
  <title>BOT API อัตราแลกเปลี่ยนเฉลี่ย (รายวัน)</title> 
  <!--  เรียก jQuery และ Jquery Ui(สำหรับ datepicker)   -->
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    
   
    <script>
          
          
          $(document).ready(function(){  
		  
		 $( "#datepicker" ).datepicker({   // สร้าง ui datepicker จาก id thml
                        dateFormat: "yy-mm-dd",   // กำหนด dateformat ที่ต้องปรับเพราะ api ต้องการ format นี้
                        onSelect: function() {  // ใส่ event เมื่อ user กดเลือกวันที่
    
	                         var dateuse = $(this).val();  // ตัวแปรเก็บค่าวันที่ที่เลือก
	                         var datasend = {     // ตัวแปร object สำหรับส่งค่าไปให้ api
                                                  start_period: dateuse,  //  วันที่เริ่ม เอาค่าจากที่ user เลือก
                                                  end_period: dateuse, // วันที่สิ้นสุด เอาค่าจาที่ user เลือก
                                                  currency: 'USD' // สกุลเงิน
                                                 }
	
	                         $.ajax({  // ใช้ ajax เรียกข้อมูลจาก url api
                                      url: 'https://iapi.bot.or.th/Stat/Stat-ExchangeRate/DAILY_AVG_EXG_RATE_V1/', // ulr ของ api
                                      headers: {
                                            'api-key': 'U9G1L457H6DCugT7VmBaEacbHV9RX0PySO05cYaGsm' // set header ตามที่ api ต้องการ
                                      }, 
                                      method: 'GET', 
                                      dataType: 'json',  // ชนิดข้อมูลที่ดึง
	                              data: datasend, // ส่งตัวแปร datased
                                      success: function(data){  // function หลังจากเรียกข้อมูลสำเร็จ
                                                    var items = [];  // สร้าง object สำหรับเก็บข้อมูลที่ได้มา
                                               
                                              // loop ข้อมูลใส่ object 
                                                  $.each( data.result.data.data_detail[0], function( key, val ) {
                                                          items.push( "<li>" +key +" : "+ val + "</li>" );
                                                     });
                           
                                                     $( ".contentg" ).html("");  // clear html เดิม
                                                     $( "<ul/>", {   // สร้าง ul ใหม่ใส่ข้อมูล items เข้าไป
                                                      "class": "my-new-list",
                                                       html: items.join( "" )
                                                      }).appendTo( ".contentg" );
	  
                                       }
                             });
                           }
                       });
                 });
          

    
    </script>
    
    <style>
         
          *{margin:0;padding:0;}
          .warp{width:80%;max-width:750px;margin:45px auto;}
          .warp p{padding:5px 5px;}
          .warp span{ display:inline-block;margin-right:2%;width:20%; }
          .warp input{width:70%;padding:3px 5px; border-radius:5px;}
          .warp a{display:inline-block;padding:5px 15px;background:red;color:#fff;margin-top:10px;text-decoration:none;}
          #tempimage{float:left;width:50%;}
          .res{float:left;width:50%;box-sizing: border-box;padding:15px;}
          .imagetxt span{display:block;padding:10px;}
       
          
          
    </style>
 
  </head>
  <body>
     
  
     <div class="warp">
	 
	  <h1>API - ธนาคารแห่งประเทศไทย  อัตราแลกเปลี่ยนเฉลี่ย (รายวัน) </h1>
	 <p>Date: <input type="text" id="datepicker"></p>
     
           <div class="contentg">
		   
		   </div>
       
     </div>


  </body>
</html>


ในเว็บของธนาคารแห่งประเทศไทยมีอยู่ 21 api https://iapi.bot.or.th/Developer?lang=th ซึ่งสามารถไปลองใช้กันได้ครับ

code สามารถ copy ไปวางไว้บน notepad หรือ editor แล้ว save เป็น .html แล้ววางใน server และ เปิด browser ก็ใช้ได้ครับ
มีข้อสงสัยสอบถามได้ครับ

 

Jakkrit says:

ขอบคุณมากครับ สำหรับ Script ที่มีประโยชน์ ผม Copy Script ไปทดลองบน Server แล้่ว พบว่า หลังเลือกวันที่แล้ว ผลที่ได้เป็นแบบนี้ครับ
period :
currency_id : USD
currency_name_th : สหรัฐอเมริกา : ดอลลาร์ (USD)
currency_name_eng : USA : DOLLAR (USD)
buying_sight :
buying_transfer :
selling :
mid_rate :
ขอคำแนะนำด้วยนะครับ ต้องต้องแก้ไขตรงไหน
https://www.siamecohost.com/exchange.html

supachet2526 says:

เนื่องจาก api ตัวนี้เป็นรายวันจึงไม่มีราคาในอนาคตครับ

Leave a Reply

Your email address will not be published. Required fields are marked *