การใช้ JQM ดึงข้อมูลจาก JSON

จากครั้งที่แล้ว เราเริ่มเขียน JQuery Mobile แต่เป็นการเขียนที่เน้นที่ตัว HTML การแสดงข้อมูลเป็นแบบตรงไปตรงมา ของตอนนี้เราจะลองเปลี่ยนเป็นการดึงข้อมูลจากไฟล์  JSON กันบ้าง ซึ่งจะเป็นพื้นฐานในตอนต่อๆไปที่เราจะใช้วิธีดึงข้อมูลผ่าน AJAX หรือ RESTful Web Service

ตอนก่อนหน้านี้: เขียน HTML5 App ด้วย jQuery Mobile (JQM)

ไฟล์ Project ของก่อนหน้านี้ครับ:  MyJQMApp.zip

ตอนที่เกี่ยวกับ JSON:  Web Data Type ตอนที่ #2/2 JSON คือ?

สร้าง JSON File:

เราสามารถสร้างไฟล์ JSON โดยการพิมพ์เอง หรือใช้ Excel หรือใช้วิธีอื่นๆก็ได้ แต่ของตอนนี้เพื่อให้ประหยัดเวลาผมจะให้เข้าไป Gen ที่เว็บ  http://www.json-generator.com/ ครับ

jqm_json002

โดยในช่องซ้ายมือ ให้เหลือแค่นี้พอ (copy ข้างล่างไปใส่ได้เลย)

[
 '{{repeat(10, 20)}}',
 {
    id: '{{objectId()}}',
    name: '{{firstName()}} {{surname()}}',
    gender: '{{gender()}}',
    email: '{{email()}}',
    phone: '{{phone()}}' 
 }
]

กด [Generate] จะได้ข้อมูลออกมาเป็น

jqm_json001

 

เริ่มสร้างไฟล์ JSON:

เนื่องจากเป็นเนื้อหาต่อเนื่องดังนั้นควรต้องมี Project ก่อนหน้านี้อยู่ก่อน หากไม่มีต้องสร้างก่อนครับ [Link] ผมขอต่อจากคราวที่แล้วใน NetBean คือ สร้างไฟล์ชื่อ person.json  โดยการคลิกขวา New-> JSON

jqm_json003

เมื่อเปิดไฟล์ขึ้นมาให้ copy ข้อมูลที่ Gen มาก่อนหน้านี้มาไว้ในไฟล์ person.json โดยโครงสร้างไฟล์ทั้งหมดจะเหมือนเดิม

[
 {
    "id": "5613e78063226f247140491a",
    "name": "Peters Cooke",
    "email": "peterscooke@rodemco.com",
    "phone": "(809) 595-3593"
 },
 //.... ตรงนี้ผมขอใส่ย่อๆนะครับ ของจริงให้ไป copy จากที่ Gen มา
 {
    "id": "5613e780eec61a7291bba44b",
    "name": "Barrera Park",
    "email": "barrerapark@rodemco.com",
    "phone": "(986) 408-3693"
 }
]

 

 

ย้อนไปดู HTML กันก่อน

เพื่อไม่ให้งง เราจะย้อนไปดู HTML ขอเดิมด้วยนะครับ

<html>
 <head>
   <title>TODO supply a title</title>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link href="css/themes/default/jquery.mobile-1.4.5.min.css" rel="stylesheet" type="text/css"/>
   <link href="app/app.css" rel="stylesheet" type="text/css"/>
 
   <script src="js/jquery.min.js" type="text/javascript"></script>
   <script src="js/jquery.mobile-1.4.5.min.js" type="text/javascript"></script>
   <script src="app/app.js" type="text/javascript"></script> 
 </head>
 <body>
   <div id="main" data-role="page">
     <div data-role="header">
       <h1>My JQM App</h1>
     </div>
     <div data-role="content">
       <ul id="mylist" data-role="listview" data-filter="true">
 
       </ul>
     </div>
     <div data-role="footer" data-position="fixed">
       <h1>Footer</h1>
     </div>
 </div>
 <!-- End Main Page -->
 
 <div id="p1" data-role="page">
   <div data-role="header">
     <h1 id="mytitle">My JQM App</h1>
   </div>
   <div data-role="content">
     <h1 id="pname">Person 1</h1>
     <h3>Phone: <span id="pphone">11111111</span></h3>
     <h3>Email: <span id="pemail">p1@abc.com</span></h3>
     <a id="backBt" href="#" data-role="button" >Back</a>
   </div>
   <div data-role="footer" data-position="fixed">
     <h1>Footer</h1>
   </div>
 </div>
 <!-- End Page 1 -->
 </body>
</html>

 

ปรับ app.js ให้ดึงข้อมูลจาก JSON

ในรอบนี้เราจะลองใช้ $.getJSON( ) ในการดึงข้อมูลจาก Project ของเราเอง

//app.js
var list_obj=[];

function genLI(p) {
 //ต่อ String ของ 
 //<li><a href='#' onclick="show_detail('xxx')">Name<p>Phone</p></a></li>
 var str = "<li>";
 str += "<a href='#' onclick=\"show_detail('" + p.id + "')\">";
 str += p.name;
 str += "<p>" + p.phone + "</p>";
 str += "</a>";
 str += "</li>";
 return str;
}

function show_detail(id){
 //รับค่า id จาก <li><a ... onclick="show_detail('xxxxx')">...
 $.mobile.changePage("#p1", {"transition": "slide"});
 //ดึง object Person จาก list_obj ที่เก็บมาจาก JSON
 var p = list_obj[id];
 //กำหนดค่าให้กับหน้า Detail
 $("#mytitle, #pname").html(p.name);
 $("#pphone").html(p.phone);
 $("#pemail").html(p.email);
}

function updateList() {
 //ดึงข้อมูลจากไฟล์ person.json
 $.getJSON("app/person.json", function (data) {
 var lstr = ""; 
 //วนดึงค่าจาก json array ที่อยู่ใน data[]
 for (var i in data) {
   // เก็บค่า data[i] ไว้ใน array เพื่อเอาไว้ใช้ในหน้า detail
   list_obj[data[i].id]=data[i];
   //สั่งให้สร้างแท็ก <li>...</li> แล้วมาต่อ String
   lstr += genLI(data[i]);
 }
 //update ข้อมูลให้กับ #mylist <ul>
 $("#mylist").html(lstr);
 //ต้องสั่งให้ refresh เพื่อให้ JQM ทำการปรับปรุงการแสดงผล
 $("#mylist").listview("refresh");
 });
}

function init() {
 //เรียกให้ update listview
 updateList();
 $("#backBt").click(function () {
    $.mobile.changePage("#main", {"transition": "slide", "reverse": "true"});
 });
}

//same as $(document).ready(init);
$(init);

ผลลัพธ์:

jqm_json004

 

ไฟล์ Project ของตอนนี้ครับ:  MyJQMJsonApp.zip

AjBee.Me : วันนี้เอาแค่นี้ก่อนนะครับ เอาตามเวลามี น่าจะพอเอาไปใช้งานต่อได้ เดี๋ยวตอนหน้าเราจะเริ่มพูดถึง AJAX กันครับ ใครรีบก็ลองศึกษาด้วยตัวเองไปก่อนได้ ^_^

ติดตามข้อมูลผ่าน FanPage เข้าไปกด Like ที่: https://www.facebook.com/AjBeeMePage