Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,027

HOME > PHP > PHP Forum > Javascript Json, eval json, jQuery json การใช้ json ร่วมกับ Javascript



 

Javascript Json, eval json, jQuery json การใช้ json ร่วมกับ Javascript

 



Topic : 086834

Guest




ก็สวัสดีเพื่อนๆ พี่ๆ น้องๆ นักพัฒนา Software ทุกท่านนะครับ
สำหรับวันนี้ผมจะมา แชร์ความรู้การใช้งาน Json ร่วมกับ Javascript โดยสิ่งที่ผมจะแนะนำหรือทำเป็น Demo นี้จะทำเป็นแบบง่ายๆก่อนนะครับเพื่อความเข้าใจ


json เป็นฟอร์แมตสำหรับแลกเปลี่ยนข้อมูลคอมพิวเตอร์ ฟอร์แมต JSON นั้นอยู่ในรูปข้อความธรรมดา (plain text) ที่ทั้งมนุษย์และโปรแกรมคอมพิวเตอร์สามารถอ่านเข้าใจได้
สำหรับถ้าต้องการไปอ่านเพิ่มเติมมากกว่านี้ให้เข้าไปที่เว็บ http://th.wikipedia.org/wiki/%E0%B9%80%E0%B8%88%E0%B8%8B%E0%B8%B1%E0%B8%99

ส่วน Javascript ก็ไม่ต้องไปพูดถึงกันหนะครับเพราะว่าใครๆก็รู้จักเป็นกันดีอยู่แล้ว

เริ่มกันเลยนะครับ
สำหรับวิธีการเล่นกับ รูปแบบข้อมูลที่เป็น Json นั้นผมจะใช้ส่วน function ของ Javascript เข้ามาช่วยในการทำเป็น Object ข้อมูล ซึ่งเป็น function ที่อรรถประโยชน์มากเลยสำหรับตัวนี้ชื่อว่า eval ถ้าเคยเขียนโปรแกรมกันมาจะรู้จัก function นี้กันเป็นอย่างดีครับไม่ว่าจะใน php, javascript และอื่นๆก็มีให้ใช้งานเหมือนกั เริ่มกันเลยดีกว่า




**** ก่อนที่จะนำ Source code นี่ไปรันทดสอบดูให้ References jQuery เข้ามาก่อนนะครับ ถ้าไม่รู้ว่าไปดาวน์โหลดที่ไหนให้ไปที่
http://jquery.com/ เว็บนี้กันเลย

ส่วนวิธีการอ้างก็
<script src="jquery.js"></script> เท่านี้แหละครับ



Code (JavaScript)
$(function(){

//#### ::[อันนี้เป็นชุดข้อมูล json ที่สมมุติขึ้นมานะครับ]
var _strJson = "{\"query\":{\"count\":9,\"created\":\"2012-11-16T03:25:46Z\",\"lang\":\"en-US\",\"results\":{\"rate\":[ " +
	       "{\"id\":\"USDTHB\",\"Name\":\"USD to THB\",\"Rate\":\"30.70\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"30.725\",\"Bid\":\"30.675\"}," +
	       "{\"id\":\"USDNOK\",\"Name\":\"USD to NOK\",\"Rate\":\"5.7617\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"5.763\",\"Bid\":\"5.7605\"}," +
	      "{\"id\":\"USDEUR\",\"Name\":\"USD to EUR\",\"Rate\":\"0.7829\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"0.783\",\"Bid\":\"0.7828\"}," +
	      "{\"id\":\"USDAUD\",\"Name\":\"USD to AUD\",\"Rate\":\"0.9675\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"0.9675\",\"Bid\":\"0.9674\"}," +
	     "{\"id\":\"USDGBP\",\"Name\":\"USD to GBP\",\"Rate\":\"0.6305\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"0.6306\",\"Bid\":\"0.6304\"}," +
	     "{\"id\":\"USDDKK\",\"Name\":\"USD to DKK\",\"Rate\":\"5.84\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"5.8403\",\"Bid\":\"5.8397\"}," +
	     "{\"id\":\"USDSEK\",\"Name\":\"USD to SEK\",\"Rate\":\"6.7659\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"6.7674\",\"Bid\":\"6.7644\"}," +
	     "{\"id\":\"USDSGD\",\"Name\":\"USD to SGD\",\"Rate\":\"1.2272\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"1.2275\",\"Bid\":\"1.227\"}," +
	     "{\"id\":\"USDAED\",\"Name\":\"USD to AED\",\"Rate\":\"3.6731\",\"Date\":\"11/16/2012\",\"Time\":\"10:25pm\",\"Ask\":\"3.6736\",\"Bid\":\"3.6726\"}" +
        "]}}}";
		
               try
	{
	
                   //#### ใช้ eval ในการทำให้ ข้อมูลที่อยู่ในรูปแบบ json ให้เป็น object
                   var _json = eval("(" + _strJson + ")");


	  //#### ::[ทำแบบวนลูป for]
	  for(var index = 0;index < _json["query"]["results"]["rate"].length;index++)
	  {
	     var item = _json["query"]["results"]["rate"][index];
	     alert("Loop " + index + "\n\nid\t::>\t" + item["id"] + "\n" +
	     	  "Name\t::>\t" + item["Name"] + "\n" + 
	                  "Rate\t::>\t" + item["Rate"] + "\n" + 
		  "Date\t::>\t" + item["Date"] + "\n" + 
		  "Time\t::>\t" + item["Time"] + "\n" + 
		  "Ask\t::>\t" + item["Ask"] + "\n" + 
		  "Bid\t::>\t" + item["Bid"] + "\n"
	           );
                   }

			
	  /*
                  //### ถ้าต้องการใช้แบบนี้ให้เอา Comment ออกนะครับ
                  //#### ::[ทำแบบวนลูป Foreach]
	 for(var _index in _json["query"]["results"]["rate"])
	 {
	    var _tr = $("<tr></tr>");
	    var item = _json["query"]["results"]["rate"][_index];
	    alert("Loop " + _index + "\n\nid\t::>\t" + item["id"] + "\n" +
	            "Name\t::>\t" + item["Name"] + "\n" + 
	            "Rate\t::>\t" + item["Rate"] + "\n" + 
	            "Date\t::>\t" + item["Date"] + "\n" + 
	            "Time\t::>\t" + item["Time"] + "\n" + 
	            "Ask\t::>\t" + item["Ask"] + "\n" + 
	            "Bid\t::>\t" + item["Bid"] + "\n"
	    );
			}*/
               }catch(e)
               {
                  alert(e.message);
               }
		
});




สำหรับ eval ถ้าต้องการจะใช้งานกับ ชุดข้อมูลที่เป็น json นั้นให้ทำตามรูปแบบนี้นะครับ
eval("(" + รูปแบบข้อมูลที่เป็น Json + ")");
สำคัญนะครับ ให้นำเครื่องหมายวงเล็บเปิด "(" - ปิด ")" มาคลอบเอาไว้




เราขออุทิศบุญกุศลในการให้ทางในครั้งนี้ให้กับ บิดา-มารดาของเรา รวมทั้งเหล่าเทวดาที่ปกปักรักษาเรา และเจ้ากรรมนายเวรของเรา เทญอ



Tag : PHP







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2012-11-16 17:02:23 By : ผู้ต้องการเผยแพร่ความรู้ View : 1115 Reply : 2
 

 

No. 1



โพสกระทู้ ( 3,155 )
บทความ ( 0 )

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


เยี่ยมครับ ขออนุโมทนาด้วยคนครับ






แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-11-16 17:23:27 By : sakuraei
 


 

No. 2



โพสกระทู้ ( 74,058 )
บทความ ( 838 )

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Facebook

อีกบทความครับ

Go to : jQuery Ajax กับ JSON (Web Service) ทำความเข้าใจ การรับส่งข้อมูล JSON ผ่าน jQuery กับ Ajax
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2012-11-16 21:23:09 By : mr.win
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : Javascript Json, eval json, jQuery json การใช้ json ร่วมกับ Javascript
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 03
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่