Ahmad Masykur

Share your knowledge although one function!

About the author

Ahmad Masykur is a Software Architecture Engineer at PT. Freeport Indonesia Jakarta Indonesia.
In this blog, I share things of interest to me. Most topics are likely to be related to software development, but don't hold me to it.

Certificates



Awards


Powered by

Widget Prayer Time not found.

There is an error in XML document (4, 16278).X

Page List

Validators


Ahmad Masykur

Deserialize JSON String ke Strong-Type Object.

Tulisan ini merupakan kelanjutan dari post sebelumnya tentang Json Serializer dan Deserializer. Pada tulisan sebelumnya, string JSON dideserialize ke dalam Generic Dictionary. Kekurangan dari metode tersebut adalah kita tidak bisa menggunakan strong-type object untuk deserialize JSON. Metode tersebut juga sudah dianggap usang oleh .NET Framework 3.5 karena dalam framework tersebut sudah disediakan pengganti System.Web.Script.Serialization.JavaScriptSerializer yaitu System.Runtime.Serialization.Json.DataContractJsonSerializer.

Untuk dapat menggunakan System.Runtime.Serialization.Json.DataContractJsonSerializer perlu menambahkan dua assembly reference ke dalam project yaitu: System.Runtime.Serialization (butuh .NET Framework 3.0) dan System.ServiceModel.Web (butuh .NET Framework 3.5). Setelah kedua assembly ini direferensikan, beberapa hal yang perlu disiapkan diantaranya.

1. Tambahkan kedua namespace berikut

using System.Runtime.Serialization.Json; using System.Runtime.Serialization;

2. Buat class yang digunakan untuk men-deserialize JSON string.

Dalam contoh ini dibuat class berdasarkan JSON yang sama seperti tulisan sebelumnya (Json Serializer dan Deserializer). Struktur string JSON tersebut adalah:

var dateFormat = '<%= GlobalCallCenter.Common.CallCenterConfig.Get("SHORT_DATE_FORMAT") %>'; var filter = { instance: $get('<%= instanceList.ClientID %>').value, requestNo: $get('<%= requestNoTextBox.ClientID %>').value, category: $get('<%= categoryList.ClientID %>').value, itemCategory: $get('<%= itemAffectedList.ClientID %>').value, ticketGroup: $get('<%= ticketGroupList.ClientID %>').value, status: $get('<%= statusList.ClientID %>').value, requestType: $get('<%= typeList.ClientID %>').value, startDate: Date.parseLocale($get('<%= dateFromTextBox.ClientID %>').value, dateFormat), finishDate: Date.parseLocale($get('<%= dateToTextBox.ClientID %>').value, dateFormat), requestedFor: $get('requestedForEmployeeId').value, assigneeId: ($get('<%= assigneeForEmployeeId.ClientID %>') != null) ? $get('<%= assigneeForEmployeeId.ClientID %>').value : $get('<%= assigneeForEmployeeIdLabel.ClientID %>').innerHTML };


Dari JSON tersebut di atas, dibuat class sebagai berikut:

[DataContract(Name = "Filter", Namespace = "")] protected internal class Filter { [DataMember(Name = "instance", Order = 1)] public string Instance { get; set; } [DataMember(Name = "requestNo", Order = 2)] public string RequestNo { get; set; } [DataMember(Name = "category", Order = 3)] public string Category { get; set; } [DataMember(Name = "itemCategory", Order = 4)] public string ItemCategory { get; set; } [DataMember(Name = "ticketGroup", Order = 5)] public string TicketGroup { get; set; } [DataMember(Name = "status", Order = 6)] public string Status { get; set; } [DataMember(Name = "requestType", Order = 7)] public string RequestType { get; set; } [DataMember(Name = "startDate", Order = 9)] public DateTime StartDate { get; set; } [DataMember(Name = "finishDate", Order = 10)] public DateTime FinishDate { get; set; } [DataMember(Name = "requestedFor", Order = 10)] public string RequestedFor { get; set; } [DataMember(Name = "assigneeId", Order = 10)] public string AssigneeId { get; set; } }

3. Buat implementasi deserialization.

Seperti pada tulisan sebelumnya di Json Serializer dan Deserializer, saya gunakan contoh yang sama yaitu event callback pada Janus Grid sebagai berikut.

protected void GridEX1_CustomCallBack(object sender, Janus.Web.Common.CustomCallBackEventArgs e) { var edata = System.Web.HttpUtility.UrlDecode(e.EventData.ToString()); System.IO.MemoryStream stream = new System.IO.MemoryStream(System.Text.Encoding.UTF8.GetBytes(edata.ToString())); DataContractJsonSerializer serializer = new DataContractJsonSerializer(typeof(Filter)); Filter filter = (Filter)serializer.ReadObject(stream); }

Dengan menggunakan strong-type kita langsung dapat mengakses property dari class tersebut, seperti terlihat pada gambar berikut.

image

Berbeda dari tulisan sebelumnya, dengan menggunakan strong-type object, semua property dapat diakses sesuai dengan tipe yang sudah didefinisikan.

Semoga bermanfaat.


Categories: ASP.NET AJAX | JavaScript | JSON
Permalink | Comments (8) | Post RSSRSS comment feed

JSON Serializer & Deserializer

Saya ingin berbagi sedikit tips mengenai JSON serializer dan deserializer yang ada di ASP.NET AJAX. Dengan menggunakan ASP.NET Ajax pertukaran data antara client (JavaScript) dengan server menjadi gampang banget. Kita tidak perlu lagi pake XMLyang rumit. Dengan JSON data mudah banget di-parse.

Contoh code di client (JS):

function getFilterData() { var dateFormat = '<%= HelpdeskSystem.DateFormat %>'; var filter = { instance: $get('<%= instanceList.ClientID %>').value, requestNo: $get('<%= requestNoTextBox.ClientID %>').value, category: $get('<%= categoryList.ClientID %>').value, itemCategory: $get('<%= itemAffectedList.ClientID %>').value, ticketGroup: $get('<%= ticketGroupList.ClientID %>').value, status: $get('<%= statusList.ClientID %>').value, requestType: $get('<%= typeList.ClientID %>').value, startDate: Date.parseLocale($get('<%= dateFromTextBox.ClientID %>').value, dateFormat), finishDate: Date.parseLocale($get('<%= dateToTextBox.ClientID %>').value, dateFormat), requestedFor: $get('requestedForEmployeeId').value, assigneeId: ($get('<%= assigneeForEmployeeId.ClientID %>') != null) ? $get('<%= assigneeForEmployeeId.ClientID %>').value : $get('<%= assigneeForEmployeeIdLabel.ClientID %>').innerHTML }; return Sys.Serialization.JavaScriptSerializer.serialize(filter); // Serialize object to JSON string }

Di server side (C#), tinggal di-deserialize. Dalam hal ini saya pake data JSON tersebut pada event CallBack Janus Grid:

protected void GridEX1_CustomCallBack(object sender, Janus.Web.Common.CustomCallBackEventArgs e) { System.Web.Script.Serialization.JavaScriptSerializer jsSerializer = new System.Web.Script.Serialization.JavaScriptSerializer(); var edata = System.Web.HttpUtility.UrlDecode(e.EventData.ToString()); var data = jsSerializer.DeserializeObject(edata); // data selanjutnya di prosess di sini }

Simple banget.

Hasil deserialize object ketika debugging tersebut dapat dilihat seperti gambar di bawah.

image

Dari gambar tersebut, string JSON telah di-deserialize menjadi object (string, Date, dll). Mudah bukan?

Semoga bermanfaat.


Categories: ASP.NET AJAX | JavaScript | JSON | Tips
Permalink | Comments (4) | Post RSSRSS comment feed

JSON vs XML

JSON (JavaScript Object Notation) merupakan format pertukaran data berdasarkan notasi JavaScript. Dari beberapa sumber mengatakan bahwa JSON lebih baik dari XML sebagai format pertukaran data. Benarkah demikian? Saya coba untuk membuat test sedarhana membandingkan kedua format data tersebut pada ASP.NET WebService.

Saya menggunakan dua parameter pembanding yaitu besar stream yang ditransmisikan dan response time. Untuk menganalisis kinerja keduanya saya gunakan tool buatan Nikhil Kotari yaitu Web Development Helper yang dapat di download dari situs pribadinya di Nikhil Kothari's Projects - Web Development Helper

Pertama saya buat sebuat object Employee dengan data EmpId, Name, Sex dan Title. object ini yang akan diserialisasi ke JSON dan XML sebagai return value WebService.

namespace JSONSample
{
    public class Employee
    {
        public string EmpId { get; set; }
        public string Name { get; set; }
        public string Title { get; set; }
        public char Sex { get; set; }
    }
}

Selanjutnya buat web service dengan dua method yang mengembalikan Employee dalam format JSON dan XML. Jangan lupa untuk menambahkan namespace System.Web.Script.Services dan class attribute [ScriptService]

using System;
using System.Collections;
using System.ComponentModel;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Web.Script.Services;

namespace JSONSample
{
    /// <summary>
    /// Summary description for WebService1
    /// </summary>
    [WebService(Namespace = "">http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [ToolboxItem(false)]
    [ScriptService]
    // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line.
    // [System.Web.Script.Services.ScriptService]
    public class WebService1 : System.Web.Services.WebService
    {

        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Xml)]
        public Employee GetEmployee(string EmpId)
        {
            var emp = new Employee();
            emp.EmpId = EmpId;
            emp.Name = "Ahmad Masykur";
            emp.Sex = 'M';
            emp.Title = "Analyst, Application Architecture";
            return emp;
        }
        [WebMethod]
        [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
        public Employee GetEmployeeJSON(string EmpId)
        {
            var emp = new Employee();
            emp.EmpId = EmpId;
            emp.Name = "Ahmad Masykur";
            emp.Sex = 'M';
            emp.Title = "Analyst, Application Architecture";
            return emp;
        }
    }
}

Berikutnya adalah buat kode javascript untuk memanggil memanggil kedua method pada WebService yang telah dibuat sebelumnya.

var displayElement1;
var displayElement2;

// Initializes global variables and session state.
function pageLoad()
{
    displayElement1 = $get("ResultId1");
    displayElement2 = $get("ResultId2");
}
function getEmployee() {
    JSONSample.WebService1.GetEmployee("894683", OnSucceeded, OnFailed);
    JSONSample.WebService1.GetEmployeeJSON("894683", OnSucceeded, OnFailed);
}

// Callback function invoked on successful
// completion of the page method.
function OnSucceeded(result, userContext, methodName)
{
    if (methodName=="GetEmployee") { // xml
        displayElement1.innerHTML = result.documentElement.selectSingleNode('//Name').text;
    }
    else { // json
        displayElement2.innerHTML = result.Name;
    }
}

// Callback function invoked on failure
// of the page method.
function OnFailed(error, userContext, methodName)
{
    if(error !== null)
    {
        displayElement.innerHTML = "An error occurred: " +
            error.get_message();
    }
}

if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();

Terakhir buat halaman ASP.NET AJAX yang akan meregister JavaScript dan WebService sehingga WebService dapat dipanggil melalui JavaScript oleh ASP.NET AJAX proxy service.


<%@ Page Language="C#" AutoEventWireup="true" Inherits="System.Web.UI.Page" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server">    <title>Untitled Page</title></head><body>    <form id="form1" runat="server">    <div>        <asp:ScriptManager ID="ScriptManager1" runat="server">        <Scripts>            <asp:ScriptReference Path="~/clientscript.js" />        </Scripts>        <Services>            <asp:ServiceReference Path="~/WebService1.asmx" />        </Services>        </asp:ScriptManager>           <input type="button" value="Invoke" onclick="getEmployee()" />        <div id="ResultId1"></div>        <div id="ResultId2"></div>    </div>    </form></body></html>

Setelah dijalankan, aktifkan Web Development Helper dan check Enable Logging. Selanjutnya klik tombol Invoke tiga kali pada halaman dan periksa hasilnya.

image

Dari hasil keluaran log dapat dilihat bahwa dengan data yang sama, format XML memerlukan 226 byte sedangkan JSON hanya 132 byte. Ini jauh lebih kecil (kurang dari setengah) dibandingkan XML. Dari sisi response time, pada invoke yang pertama XML membutuhkan waktu 0:0:3430 sedangkan JSON 0:0:3280 dan invoke berikutnya untuk XML 0:0:0150 sedangkan JSON 0:0:0000. Dari data ini membuktikan bahwa JSON memang lebih ringan dibandingkan XML baik dari sisi ukuran stream yang ditransmisikan lebih kecil maupun waktu proses di server juga lebih singkat.


Tags: ,
Categories: ASP.NET AJAX | JavaScript | JSON
Permalink | Comments (15) | Post RSSRSS comment feed

Parsing Data JSON

Sebagaimana telah disebutkan pada tulisan saya sebelumnya bahwa JSON memiliki kelemahan jika data yang diterima tidak diperiksa terlebih dahulu. Jika masukan data bisa dijamin bahwa tidak akan ada script yang berbahaya, issue ini bisa diabaikan. Namun jika data berasal dari situs luar seperti halnya layanan berita (RSS) atau informasi lain dari luar, risiko adanya script jahat pada data JSON cukup besar. Oleh karena itu sebelum data JSON dipanggil menggunakan fungsi eval(), terlebih dahulu data yang diterima harus diperiksa.

Pada tulisan ini, saya menggunakan library glm-ajax sebagai framework untuk mempermudah penggunaan AJAX dan json.js untuk melakukan parsing data JSON.

Penerimaan Data JSON melalui AJAX.

Sebagai contoh sedarhana, bila sebuah data json mengandung string berikut:

processData( { "color" : "green" } )

Kemudian buat halaman HTML yang berisi script untuk memanggill data JSON di atas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Retrieving JSON Data via AJAX</title>
    <script type="text/javascript" language="javascript" src="glm-ajax.js" >
    </script>
    <script type="text/javascript" language="javascript">
        function processData(JSONData) {
            alert(JSONData.color);
        }
        function ajaxCallback(content) {
            eval(content); //eval the contents of data.
        }
        var ajax = new GLM.AJAX();
        //call json-func-data.txt and pass the contents to ajaxCallback.
        ajax.callPage("json-func-data.txt", ajaxCallback); 
    </script>
</head>
<body>
</body>
</html>

Pada contoh di atas, data JSON merupakan sebuah kode javascript. Ketika dilewatkan pada pernyataan eval() maka processData akan dieksekusi. Hal ini karena data JSON berupa kode javascript untuk memanggil fungsi processData.

Contoh berikutnya digunakan method parse. Untuk menggunakan method ini, sertakan library json.js ke dalam halaman.

Data JSON sebagai berikut.

{ "color" : "green" }

Pada HTML, sertakan library json.js dan ubah fungsi ajax Callback untuk melakukan parsing data JSON terlebih dahulu sebalum mengeksekusi fungsi processData(JSONData).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Retrieving JSON Data via AJAX</title>
    <script type="text/javascript" language="javascript" src="json.js" ></script>
    <script type="text/javascript" language="javascript" src="glm-ajax.js" ></script>
    <script type="text/javascript" language="javascript">
        function processData(JSONData) {
            alert(JSONData.color);
        }
        function ajaxCallback(content) {
            JSONData = content.parseJSON();
            processData(JSONData); 
        }
        var ajax = new GLM.AJAX();
        //call json-func-data.txt and pass the contents to ajaxCallback.
        ajax.callPage("json-func-data.txt", ajaxCallback); 
    </script>
</head>
<body>
</body>
</html>

Kode di atas, server akan mengembalikan file JSON dan akan diparsing terlebih dahulu menggunakan baris JSONData = content.parseJSON(); dan kemudian JSONData dilewatkan pada fungsi processData. Dari kedua contoh di atas, masing-masing akan menghasilkan keluaran yang sama. Namun pada beberapa kasus jika data JSON mengandung kode jahat atau data yang salah, contoh kedua lebih aman untuk menangani masalah ini.

Pengiriman Data JSON ke Server

Komunikasi pada AJAX menggunakan string yang telah disandikan (encoded). Data Javascript harus disandikan terlebih dahulu sebelum dikirim menggunakan XMLHttpRequest. Untuk merubah semua data Javascript ke dalam format JSON dapat digunakan library json.js yang dibuat oleh Douglas Crockford.

Contoh berikut menggunakan method toJSONString() untuk melakukan konversi object ke dalam string yang siap dikirimkan ke server.

var employees = { "accounting" : [  // accounting is an array in employees
                                   { "firstName" : "Ahmad",
                                     "lastName"  : "Masykur",
                                     "age"       : 25 },
                                   { "firstName" : "Agung",
                                     "lastName"  : "Riyadi",
                                     "age"       : 29 }
                                 ], // End "accounting" array
                  "sales" :      [  // Sales is another array in employees
                                   { "firstName" : "Vianton",
                                     "lastName"  : "Rahmat",
                                     "age"       : 23 },
                                   { "firstName" : "Kusuma",
                                     "lastName"  : "Dewi",
                                     "age"       : 25 }
                                 ]  // End "sales" array
                }
var toServer = employees.toJSONString();
document.writeln(toServer);

Dengan melakukan parsing data terlebih dahulu, data yang dipertukarkan antara client dan server akan lebih terjamin keamanannya. Saat ini belum ada method internal Javascript untuk membuat data JSON. Method untuk menangani JSON ini rencana akan diimplementasikan pada tahun 2007. Sebelum method tersebut belum masuk menjadi method internal javascript, kita dapat menggunakan library javascript untuk melakukan parsing dan konversi object javascript ke dalam string JSON. Untuk membuat data dengan format JSON dan melakukan parsing data sebelum diproses dapat digunakan library buatan Douglas Crockford yang dapat didownload di http://www.json.org/json.js.


Categories: Security | AJAX | JSON
Permalink | Comments (13) | Post RSSRSS comment feed

Penerimaan Data JSON melalui AJAX

Dari dua tulisan terdahulu tentang Pengantar AJAX dan JSON, kita akan padukan keduanya. Di sini saya coba untuk menjelaskan implementasi keduanya menggunakan native JavaScript supaya cara kerja keduanya bisa dipahami dengan jalas.

Pertama, buat dokumen JSON yang disimpan ke dalam file dengan nama json-data.txt.

1 { "accounting" : [ // accounting is an array in employees 2 { "firstName" : "Ahmad", 3 "lastName" : "Masykur", 4 "age" : 25 }, 5 { "firstName" : "Agung", 6 "lastName" : "Riyadi", 7 "age" : 29 } 8 ], // End "accounting" array 9 "sales" : [ // Sales is another array in employees 10 { "firstName" : "Vianton", 11 "lastName" : "Rahmat", 12 "age" : 23 }, 13 { "firstName" : "Kusuma", 14 "lastName" : "Dewi", 15 "age" : 25 } 16 ] // End "sales" array 17 } // End JSON data

File data JSON tersebut yang nantinya akan dipanggil menggunakan XMLHttpRequest. Sama seperti tulisan sebelumnya, data tersebut mengandung dua buah entity yaitu accounting dan sales. Masing-masing entity memiliki data berupa array yang isinya adalah data firstName, lastName dan age.

Selanjutnya buat object XMLHttpRequest (XHR) untuk mengambil data JSON dari server. Simpan kode berikut ke dalam file get-json.js.

1 var http_request = false; 2 var _ctrl = {}; 3 function makeRequest(url, ctrl) { 4 _ctrl = ctrl; 5 http_request = false ; 6 if (window.XMLHttpRequest) { // Mozilla, Safari ,... 7 http_request = new XMLHttpRequest(); 8 if (http_request.overrideMimeType) { 9 http_request.overrideMimeType('text/xml'); 10 // See note below about this line 11 } 12 } else if (window.ActiveXObject) { // IE 13 var aVersions = [ "MSXML2.XMLHttp.6.0", 14 "MSXML2.XMLHttp.5.0", 15 "MSXML2.XMLHttp.4.0", 16 "MSXML2.XMLHttp.3.0", 17 "Microsoft.XMLHTTP" ]; 18 for (var i = 0; i < aVersions.length; i++) { 19 try { http_request = new ActiveXObject(aVersions[i]); 20 break; 21 } 22 catch (e) 23 { 24 // Do nothing 25 } 26 } 27 } 28 if (!http_request) { 29 alert ('Giving up :( Cannot create an XMLHTTP instance'); 30 return false; 31 } 32 http_request.onreadystatechange = renderData; 33 http_request.open('GET', url, true); 34 http_request.send(null); 35 } 36 function renderData() { 37 if (http_request.readyState == 4) { 38 if (http_request.status == 200) { 39 eval("var employees = " + http_request.responseText); 40 _ctrl.innerHTML = ''; 41 for (i=0; i < employees.accounting.length; i++) { 42 _ctrl.innerHTML += '<br /><strong>Accounting #' + 43 (i+1) + '</strong>' + 44 '<br />First Name : ' + 45 employees.accounting[i].firstName + 46 '<br />Last Name : ' + 47 employees.accounting[i].lastName + 48 '<br />Age : ' + 49 employees.accounting[i].age; 50 } 51 for (i=0; i < employees.sales.length; i++) { 52 _ctrl.innerHTML += '<br /><strong>Sales #' + 53 (i+1) + '</strong>' + 54 '<br />First Name : ' + 55 employees.sales[i].firstName + 56 '<br />Last Name : ' + 57 employees.sales[i].lastName + 58 '<br />Age : ' + 59 employees.sales[i].age; 60 } 61 } else { 62 alert('There was a problem with the request.'); 63 } 64 } 65 }

Kode di atas, terdapat dua buah fungsi makeRequest dan renderData. Fungsi makeRequest digunakan untuk membuat object XHR dan melakukan request secara asynchron. Fungsi renderData adalah fungsi callback yang dipanggil setelah ada respon dari server. Fungsi ini digunakan untuk membuat tag HTML berdasarkan data JSON yang diperoleh dan menampilkan hasilnya di halaman.

Terakhir buat kode HTML untuk menampilkan hasil pengambilan data JSON.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Receiving JSON via AJAX</title> <script type="text/javascript" language="javascript" src="get-json.js" ></script> </head> <body> <input type="button" value="Click me" onclick="makeRequest('json-data.txt', document.getElementById('data'))" /> <br /> <span id="data"></span> </body> </html>

Halaman tersebut hanya akan menampilkan satu tombol [Click me]. Ketika tombol tesebut di-klik, fungsi makeRequest akan dipanggil dan melakukan request data 'json-data.txt' dari server. Data yang diambil kemudian dirender pada tag <span>.

JSON merupakan format data yang sederhana namun tangguh. Berdasarkan contoh kode di atas, kita dapat melihat bahwa untuk menampilkan data JSON ke dalam halam hanya dibutuhkan beberapa baris kode saja.

Kode di atas merupakan kode yang sangat sederhana yang masih memiliki lobang keamanan dan sangat rentan terhadap cross-site-scripting. Jika data JSON mengandung script jahat, kode tersebut juga akan dieksekusi, karena sifat JSON dapat berisi semua object Javascript termasuk function. Untuk mengatasi masalah ini diperlukan parser untuk mem-parsing semua object yang diterima melalui AJAX. Pembahasan mengenai parsing data JSON Insya Allah akan saya bahas pada tilisan saya berikutnya.  Semoga tulisan ini dapat bermanfaat untuk memulai belajar AJAX dengan format data JSON.


Categories: AJAX | JSON
Permalink | Comments (3) | Post RSSRSS comment feed

JSON (JavaScript Object Notation)

JSON merupakan salah satu format pertukaran data anatara browser dengan server. JSON memiliki format yang lebih sederhana dan elegan dibandingkan dengan pendahulunya, XML.

Object

Sebuah object dideklarasikan dengan

var myObject = {};

Terlihat sangat sederhana, di dalam pasangan kurungkurawal dapat berisi berbagaimacam infomasi dari yang paling sederhana hingga kompleks. Javascript menyimpan semua informasi di dalam pasangan kurungkurawal yang dapat berisi semua bentuk tipe data primitive seperti string, angka (number), array, tanggal (date) dan regular expression.

Pembuatan sebuah Object

Cara lama untuk membuat sebuah object adalah dengan menggunakan kata-kunci new.

var myJSON = new Object();

Metode ini telah diperbaiki. Sekarang untuk membuat object kosong, dapat digunakan  dengan hanya mendefinisikan pasangan kurungkurawal.

var myJSON = {};

Object sebagai Data

Seperti halnya kebanyakan object dasar Javascript, format data sangatlah fleksibel yang ditulis sebagai pasangan nama dan nilai. Object memiliki nama yang terkandung dalam property object yang biasanya disebut sebagai nama object. Object juga memiliki property nilai. Lihat contoh berikut:

var myFirstJSON = { "firstName" : "Ahmad", "lastName" : "Masykur", "age" : 25 }; document.writeln(myFirstJSON.firstName); // Outputs Ahmad document.writeln(myFirstJSON.lastName); // Outputs Masykur document.writeln(myFirstJSON.age);

Object ini memiliki tiga property atau pasangan nama dan nilai. Nama adalah sebuah string (pada contoh di atas firstName, lastName dan age). Nilai dapat diisi dengan semua jenis object Javascript (semua di Javascript adalah object, nilai dapat diisi dengan string, angka, array, fungsi dan Object lainnya). Pada contoh di atas nilai diisi dengan Ahmad, Masykur dan 25. Ahmad dan Masykur adalah string dan 25 adalah angka. Seperti anda lihat pada contoh, nilai dapat diisi dengan berbagai macam object.

Format data ini disebut sebagai JSON (JavaScript Object Notation). Yang menjadikan JSON tangguh adalah kemampuan nilai diisi dengan semua jenis data. Nilai dapat diisi dengan array atau object yang bertingkat dengan kedalaman yang tak terhingga. Berikut adalah salah satu contoh struktur JSON yang kompleks.

var employees = { "accounting" : [ // accounting is an array in employyes { "firstName" : "Ahmad", // First element "lastName" : "Masykur", "age" : 25 }, { "firstName" : "Agung", // Second element "lastName" : "Riyadi", "age" : 29 } ], // End "accounting" array "sales" : [ // Sales is another array in employees. { "firstName" : "Vianton", // First element "lastName" : "Rahmat", "age" : 25 }, { "firstName" : "Kusuma", // Second element "lastName" : "Dewi", "age" : 25 } ] // End "sales" array } // End Employees

Pada contoh di atas employees adalah sebuah object dimana object tersebut memiliki dua property atau pasangan nama dan nilai. Di dalam employeesaccounting adalah sebuah array dengan dua object JSON yang mimiliki dua employees dengan object name dan age. Seperti halnya accounting, sales adalah array yang memiliki dua object JSON. Semua data ini berada di dalam object employees.

Pengaksesan Data pada JSON

Cara yang paling umum untuk mengakses data JSON adalah dengan menggunakan notasi titik. Caranya dengan menuliskan nama object diikuti dengan titik dan kemudian diikuti dengan nama/property.

var myObject = { 'color' : 'blue' }; document.writeln(myObject.color); // output blue

Jika object mengandung object lagi di dalamnya, tinggal tambahkan titik dan nama di belakangnya.

 

var myObject = { 'color' : 'blue', 'animal' : { 'cat' : 'friendly' } }; document.writeln(myObject.animal.cat); // output friendly

Dengan menggunakan contoh employees sebalumnya, jika ingin mengakses orang pertama yang bekerja sebagai sales adalah sebagai berikut.

document.writeln(employees.sales[0].firstName + ' ' + employees.sales[0].lastName);

Untuk mengakses orang kedua yang bekerja sebagai accunting adalah.

document.writeln(employees.accounting[1].firstName + ' ' + employees.accounting[1].lastName);

Pada contoh di atas, employees adalah object yang memiliki dua array, masing-masing array memiliki dua object. JSON bisa memiliki struktur sekompleks apapun. Struktur JSON hanya dibatasi oleh jumlah storage dan memori yang tersedia. Hal ini dikarenakan JSON dapat berisi object dalam object dalam object dan array di dalam array di dalam array dan seterusnya.

Mengakses JSON dengan Associative Array

JSON juga dapat diakses dengan cara seperti associative array.

var myFirstJSON = { "firstName" : "Ahmad", "lastName" : "Masykur", "age" : 25 }; document.writeln(myFirstJSON["firstName"]); // Outputs Ahmad document.writeln(myFirstJSON["lastName"]); // Outputs Masykur document.writeln(myFirstJSON["age"]); // Outputs 25

Demikian paparan singkat mengenai JSON. Pada artikel berikutnya Insya Allah akan saya jelaskan implementasi JSON dengan AJAX.


Categories: JSON
Permalink | Comments (5) | Post RSSRSS comment feed