|
|
|
Javascript Json, eval json, jQuery json การใช้ json ร่วมกับ Javascript |
|
|
|
|
|
|
|
ก็สวัสดีเพื่อนๆ พี่ๆ น้องๆ นักพัฒนา 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
|
|
|
|
|
|
Date :
2012-11-16 17:02:23 |
By :
ผู้ต้องการเผยแพร่ความรู้ |
View :
1165 |
Reply :
2 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
เยี่ยมครับ ขออนุโมทนาด้วยคนครับ
|
|
|
|
|
Date :
2012-11-16 17:23:27 |
By :
sakuraei |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 01
|