Seperti kita tahu json adalah suatu format pertukaran data untuk berbagai macam bahasa pemgrograman. Json(baca: jason) memungkinkan developer untuk bertukar data dengan ringan dan mudah. Secara teknis Json memiliki 6 (enam) jenis nilai diantaranya objek, array, string, integer, boolean (true dan false) dan null. Tapi ox disini tidak akan menulis detail tentang itu, melainkan praktik pada Twitter API. Ya! API adalah syarat wajib bagi perusahaan besar seperti Twitter, Instagram, Flickr dan lainnya.
Karena pihak ketiga dapat mengambil informasi tanpa merugikan pihak pertama, dalam hal ini adalah Password.

Postingan ini membahas tentang pengolahan data json dari twitter, menggunakan jQuery. Jadi alurnya begini:
1. Tentukan dulu data apa yang di ambil dari Twitter.
2. Parsing Json menggunakan jQuery.
3. Tentukan penulisan data sambil parsing tadi, lalu buat stylenya.

Tahap pertama

Kita ambil twit dari @ox69xo(nickname ox sendiri). Dengan hashtag #oxquote, jadi urlnya seperti ini:

http://search.twitter.com/search.json?callback=?&rpp=50&q=%23oxquote%20from%3Aox69xo

Untuk melihat json-nya, silahkan copy url di atas dan buka di browser. Nah, dari data json itu ox akan mengambil 1 data saja, yaitu bagian "text".

Tahap kedua

Parsing json tadi dengan bantuan jQuery. Ya, panggil jQuery-nya dulu.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

Lalu siapkan konfigurasi username, hashtag dan jumlah twit yang akan di tampilkan, lihat contohnya:

var tampil = 10;
var tagar = "oxquote";
var akun = "ox69xo";
/* kode berikut untuk me-reload data persekian detik(1 detik = 1000)*/
setInterval( function() {
    getTwitter('param')
}, 60000);
/* kita setting reload-nya per 1 menit = 60000 */

Nah, jika jQuery sudah di panggil dan konfigurasi sudah di buat. Sekarang tinggal panggil javascript yang sudah ox upload ke google code. Lihat url berikut:

<script src="http://ox69xo.googlecode.com/files/ox.parsing.json.min.js"></script>

Tahap ketiga

Untuk style kurang lebihnya seperti ini:

body{font-family:'Trebuchet MS';font-size:100%;}
#output{margin:auto;width:80%;}
#output ul { 
    padding-top: 5px; 
    line-height: 1.3em;
    padding-left: 15px;
}
#output ul li{list-style:none;}
#output ul li:nth-child(odd){color:#999;}

Terkait dengan style, silahkan baca juga artikel ox yang lain "penerapan sederhana responsive web design"
Demo? Silahkan download html lengkapnya di sini

Happy Ngoprek!

Seperti kita tahu j son adalah suatu format pertukaran data untuk berbagai macam bahasa pemgrograman. J son (baca: jason) memungkinkan de...