Posterous theme by Cory Watilo

Filed under: json

Ornagai Dictionary with Jquery + JSON

Today, I am making ornagai dictionary with jquery. I was thinking about at 7:00 at English Tuition. At 12:00 pm, I was staring the code for that. It was complete in a half hour. However, it's using 20 KB JSON file. So, I thought it, "Can I do complete dictionary in one JSON file ? " I export the JSON from mysql database. It had 4 MB. And then run in my code. Oop!!! My firefox had been hung. I restart my firefox and changing my code. I will show just 9 results and try again it. It was ok but too long to wait. So, I decided to make index the JSON. I made a.json to z.json and then search again. Amazing... I said "Awesome!!!" It's so fast and unbelievable searching. I love jquery and JSON. I finished that project just in 2 hours. You can download JqueryDict in there. I am thinking about Myanmar to the English dictionary with JqueryDict but it should make many indexs for ka to arh. So, I will do when I have a free time.

 

Cheer!!!

Use JSON with Notepad++

JSON is js object, so we can use javascript syntax highlighting. First, Setting > Style Configure and then select Javascript in list box. you will see User ext in below. Fille json and then Save & Close. Second, Setting > Preference and Go to File Association Tab > Customize and type .json in textbox and click -> . You will see .json in Registered exts: listbox. After that , you can double click to .json file. It's will open with notepad++ and also include syntax highlighting. If you don't like syntax, you can change javascript syntax highlighting in Setting > Style Configuration > Javascript.

Json with Jquery

Today, I am think about ornagai api. I should export with JSON because json is easy to read data with javascript library (mootools,jquery,etc..) and also with PHP. So, I tring with Jquery to read json. Oh! it's so easy and so nice for me.

This is a data.json

{
"data":
[{
"word":"A",
"state":"art",
"def":"     the first letter of the English alphabet"
},
{
"word":"Art",
"state":"n",
"def":"the quality, production, expression, or realm, according to aesthetic principles, of what is beautiful, appealing, or of more than ordinary significance"
}
,
{
"word":"Saturn",
"state":"n",
"def":"an ancient Roman god of agriculture, the consort of Ops, believed to have ruled the earth during an age of happiness and virtue, identified with the Greek god Cronus."
}]

}

This is my jquery code

[sourcecode lang='js'] $(function() { $.getJSON("data.json", function(json) { alert(json.data[1].def); $.each(json.data,function(i,mydata){ $("#result").append(mydata.word+"<br>"); }); }); }); [/sourcecode]

Complete HTML code is

[sourcecode lang='xhtml'] <html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(function() {
$.getJSON("data.json", function(json) {
alert(json.data[1].def);
$.each(json.data,function(i,mydata){
$("#result").append(mydata.word+"<br>");
});
});
}); </script>
</head>
<body>
<div id="result">
</div>
</body>
</html> [/sourcecode]

Download Complete source code