{"id":101,"date":"2009-07-12T22:01:19","date_gmt":"2009-07-12T20:01:19","guid":{"rendered":"http:\/\/www.idwaikat.me\/?p=101"},"modified":"2009-08-15T20:54:42","modified_gmt":"2009-08-15T18:54:42","slug":"json-basic-intro","status":"publish","type":"post","link":"http:\/\/www.idwaikat.me\/?p=101","title":{"rendered":"JSON – Basic Intro"},"content":{"rendered":"

JSON (pronounced like “Jason<\/em>“): short for J<\/strong>avaS<\/strong>cript O<\/strong>bject N<\/strong>otation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. The official Internet media type for JSON is “application\/json<\/em>“. The JSON file extension is .json<\/em>.<\/p>\n

The JSON format is often used for serialization, transmitting structured data over a network connection. Its main application is in Ajax web application programming, where it serves as an alternative to the use of the XML format. JSON is supported by MSIE 5.5+, Mozilla\/4.0 and most of other browsers.<\/p>\n

Now let’s do some examples.<\/p>\n

In Javascript we know how to declare and initiate an object:<\/p>\n

var<\/span> myObject = new<\/span> Object();<\/span><\/p>\n

it’s simple…now we will declare JSON:<\/p>\n

var<\/span> myJSON = { } ;<\/span><\/p>\n

yes, it’s braces (curly brackets) not parentheses… thats how to declare it.. we don’t need any external javascript files.<\/span><\/p>\n

Now we will use it as data object, we will store some data about person:<\/span><\/p>\n

var<\/span> personJSON = { “firstName”<\/span> : “Ibraihm”<\/span>,
\n<\/span><\/p>\n

“lastName”<\/span> : “Dwaikat”<\/span>,<\/span><\/p>\n

“address”<\/span> : “Palestine”<\/span>};<\/span><\/p>\n

We stored it, now we will use it, there are two ways to access the data:<\/span><\/p>\n

1- Using Dot Notation:<\/strong><\/span><\/p>\n

document.write(personJSON.firstName); \/\/ prints the first name:Ibrhahim<\/span><\/span><\/p>\n

document.write(personJSON.lastName); \/\/ prints the last name:Dwaikat<\/span><\/span><\/p>\n


\n<\/span><\/span><\/p>\n

\n

2- Like Associative Array<\/a>:
\n<\/strong><\/span><\/span><\/p>\n

document.write(personJSON[“firstName”<\/span>]); \/\/ prints the first name:Ibrhahim<\/span><\/span><\/p>\n

document.write(personJSON[“lastName”<\/span>]); \/\/ prints the last name:Dwaikat<\/span><\/span><\/p>\n

NOTE<\/strong><\/span> that this is NOT <\/strong><\/span>Associative Array, it appears like<\/span> associative array<\/span><\/p>\n

Let’s do another example, more complex, let’s make a category of websites: Arabic websites and English websites, each website contains data about website name, URL and website type, this can be coded in JSON as follows:<\/p>\n

var<\/span> websites = { “arabicWebsites”<\/span> : [ \/\/this category is an array of arabic websites<\/span><\/span><\/p>\n

{“websiteName”<\/span> : “Balata-Albalad”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.balata-albalad.org”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Information website”<\/span>} ,<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Google Jordan”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.google.jo”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Search Engine”<\/span> }<\/span><\/p>\n

], \/\/end of arabicWebsites<\/span><\/span><\/p>\n


\n<\/span><\/span><\/p>\n

\u00a0<\/p>\n

“englishWebsites”<\/span> : [ \/\/this category is an array of english websites<\/span><\/span><\/p>\n

{“websiteName”<\/span> : “Ibrahim Dwaikat”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.idwaikat.me”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Personal website”<\/span>} ,<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Facebook”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.facebook.com”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Social network service”<\/span> },<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Wolfram Alpha”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.wolframalpha.com”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Answer Engine”<\/span>} <\/span><\/p>\n

] \/\/end of englishWebsites<\/span><\/span><\/p>\n

} \/\/ end of websites<\/span><\/span><\/p>\n

\n

\n

now we will access the websites and write it on the screen as hyperlinks (<a href=’http….’>site<\/a>) then writing <br\/> to write the next one on new line, we will do it using two for loops, one for ArabicWebistes and one for EnglishWebsite, it may be done like this:<\/span><\/p>\n

document.write(“<hr \/>ARABIC WEBSITES: <br \/><br \/>”<\/span>);<\/span><\/p>\n

for<\/span>(var<\/span> i=0; i<websites.arabicWebsites.length; i++)<\/span><\/p>\n

{<\/span><\/p>\n

document.write(“<a href='”<\/span> + websites.arabicWebsites.websiteURL + “‘>”<\/span> + websites.arabicWebsites.websiteName + ” (“<\/span> + websites.arabicWebsites.websiteType +“) “<\/span> + “<\/a><br \/>”<\/span>);<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0<\/p>\n

document.write(“<hr \/>ENGLISH WEBSITES: <br \/><br \/>”<\/span>);<\/span><\/p>\n

for<\/span>(var<\/span> i=0; i<websites.englishWebsites.length; i++)<\/span><\/p>\n

{<\/span><\/p>\n

document.write(“<a href='”<\/span> + websites.englishWebsites.websiteURL + “‘>”<\/span> + websites.englishWebsites.websiteName + ” (“<\/span> + websites.englishWebsites.websiteType +“) “<\/span> + “<\/a><br \/>”<\/span>);<\/span><\/p>\n

}<\/span><\/p>\n

the output is something like this:<\/span><\/p>\n

ARABIC WEBSITES:<\/p>\n

Balata-Albalad (Information website) <\/a>
\nGoogle Jordan (Search Engine) <\/a><\/p>\n

\n

ENGLISH WEBSITES:<\/p>\n

Ibrahim Dwaikat (Personal website) <\/a>
\nFacebook (Social network service) <\/a>
\nWolfram Alpha (Answer Engine) <\/a><\/p>\n

\n

\n

\n

That’s all about how to basically use JSON, the next lesson will be: How to send JSON data to ASP.NET server<\/span>.. see you soon, thanks for reading.<\/span><\/p>\n

PS: The following is the full code used in this lesson<\/p>\n

\n

<<\/span>html<\/span>><\/span><\/p>\n

<<\/span>head<\/span>><\/span><\/p>\n

<\/<\/span>head<\/span>><\/span><\/p>\n

<<\/span>body<\/span>><\/span><\/p>\n

\u00a0<\/p>\n

<<\/span>script<\/span> language<\/span>=”javascript”<\/span> type<\/span>=”text\/javascript”><\/span><\/span><\/p>\n

\u00a0<\/p>\n

\/\/object<\/span><\/span><\/p>\n

var<\/span> myObject = new<\/span> Object();<\/span><\/p>\n

\u00a0<\/p>\n

\/\/JSON<\/span><\/span><\/p>\n

var<\/span> myJSON = { } ;<\/span><\/p>\n

\u00a0<\/p>\n

var<\/span> personJSON = { “firstName”<\/span> : “Ibraihm”<\/span>,<\/span><\/p>\n

“lastName”<\/span> : “Dwaikat”<\/span>,<\/span><\/p>\n

“address”<\/span> : “Palestine”<\/span>};<\/span><\/p>\n

\u00a0<\/p>\n

\/\/Accessing data using dot notation<\/span><\/p>\n

document.write(personJSON.firstName); \/\/ prints the first name:Ibrhahim<\/span><\/span><\/p>\n

document.write(personJSON.lastName); \/\/ prints the last name:Dwaikat<\/span><\/span><\/p>\n

\u00a0<\/p>\n

document.write(“<br \/>”<\/span>); \/\/new line, just for formatting purposes<\/span><\/span><\/p>\n

\u00a0<\/p>\n

\/\/Accessing data like Associative Array<\/span><\/p>\n

document.write(personJSON[“firstName”<\/span>]); \/\/ prints the first name:Ibrhahim<\/span><\/span><\/p>\n

document.write(personJSON[“lastName”<\/span>]); \/\/ prints the last name:Dwaikat<\/span><\/span><\/p>\n

\u00a0<\/p>\n

document.write(“<br \/>”<\/span>); \/\/new line, just for formatting purposes<\/span><\/span><\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

var<\/span> websites = { “arabicWebsites”<\/span> : [ \/\/this category is an array of arabic websites<\/span><\/span><\/p>\n

{“websiteName”<\/span> : “Balata-Albalad”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.balata-albalad.org”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Information website”<\/span>} ,<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Google Jordan”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.google.jo”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Search Engine”<\/span> }<\/span><\/p>\n

], \/\/end of arabicWebsites<\/span><\/span><\/p>\n

\u00a0<\/p>\n

“englishWebsites”<\/span> : [ \/\/this category is an array of english websites<\/span><\/span><\/p>\n

{“websiteName”<\/span> : “Ibrahim Dwaikat”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.idwaikat.me”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Personal website”<\/span>} ,<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Facebook”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.facebook.com”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Social network service”<\/span> },<\/span><\/p>\n

\u00a0<\/p>\n

{“websiteName”<\/span> : “Wolfram Alpha”<\/span>,<\/span><\/p>\n

“websiteURL”<\/span> : “http:\/\/www.wolframalpha.com”<\/span>,<\/span><\/p>\n

“websiteType”<\/span> : “Answer Engine”<\/span>} <\/span><\/p>\n

] \/\/end of englishWebsites<\/span><\/span><\/p>\n

} \/\/ end of websites<\/span><\/span><\/p>\n

\u00a0<\/p>\n

document.write(“<hr \/>ARABIC WEBSITES: <br \/><br \/>”<\/span>);<\/span><\/p>\n

for<\/span>(var<\/span> i=0; i<websites.arabicWebsites.length; i++)<\/span><\/p>\n

{<\/span><\/p>\n

document.write(“<a href='”<\/span> + websites.arabicWebsites.websiteURL + “‘>”<\/span> + websites.arabicWebsites.websiteName + ” (“<\/span> + websites.arabicWebsites.websiteType +“) “<\/span> + “<\/a><br \/>”<\/span>);<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0<\/p>\n

document.write(“<hr \/>ENGLISH WEBSITES: <br \/><br \/>”<\/span>);<\/span><\/p>\n

for<\/span>(var<\/span> i=0; i<websites.englishWebsites.length; i++)<\/span><\/p>\n

{<\/span><\/p>\n

document.write(“<a href='”<\/span> + websites.englishWebsites.websiteURL + “‘>”<\/span> + websites.englishWebsites.websiteName + ” (“<\/span> + websites.englishWebsites.websiteType +“) “<\/span> + “<\/a><br \/>”<\/span>);<\/span><\/p>\n

}<\/span><\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

<\/<\/span>script<\/span>><\/span><\/span><\/p>\n

\u00a0<\/p>\n

<\/<\/span>body<\/span>><\/span><\/p>\n

<\/<\/span>html<\/span>><\/span><\/p>\n

\n


\n<\/span><\/p>\n

References:
\njson.org<\/a>
\nwikipedia.org<\/a>
\nmetaparadigm.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"

JSON (pronounced like “Jason“): short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. The official Internet media type for JSON is “application\/json“. The JSON file extension is .json. The JSON format is often used for serialization, transmitting structured<\/p>\n

\n\t\t\t\t Read More <\/span> <\/i><\/a>\n\t\t\t<\/div>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false,"_expiration-date-status":"","_expiration-date":0,"_expiration-date-type":"","_expiration-date-categories":[],"_expiration-date-options":[]},"categories":[9],"tags":[23,24,21,22],"yoast_head":"\r\nJSON - Basic Intro - Eng. Ibrahim Dwaikat<\/title>\r\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\r\n<link rel=\"canonical\" href=\"http:\/\/www.idwaikat.me\/?p=101\" \/>\r\n<meta property=\"og:locale\" content=\"en_US\" \/>\r\n<meta property=\"og:type\" content=\"article\" \/>\r\n<meta property=\"og:title\" content=\"JSON - Basic Intro - Eng. Ibrahim Dwaikat\" \/>\r\n<meta property=\"og:description\" content=\"JSON (pronounced like “Jason“): short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. The official Internet media type for JSON is “application\/json“. The JSON file extension is .json. The JSON format is often used for serialization, transmitting structured Read More\" \/>\r\n<meta property=\"og:url\" content=\"http:\/\/www.idwaikat.me\/?p=101\" \/>\r\n<meta property=\"og:site_name\" content=\"Eng. Ibrahim Dwaikat\" \/>\r\n<meta property=\"article:published_time\" content=\"2009-07-12T20:01:19+00:00\" \/>\r\n<meta property=\"article:modified_time\" content=\"2009-08-15T18:54:42+00:00\" \/>\r\n<meta name=\"author\" content=\"admin\" \/>\r\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\r\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\r\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.idwaikat.me\/?p=101\",\"url\":\"http:\/\/www.idwaikat.me\/?p=101\",\"name\":\"JSON - Basic Intro - Eng. Ibrahim Dwaikat\",\"isPartOf\":{\"@id\":\"http:\/\/www.idwaikat.me\/#website\"},\"datePublished\":\"2009-07-12T20:01:19+00:00\",\"dateModified\":\"2009-08-15T18:54:42+00:00\",\"author\":{\"@id\":\"http:\/\/www.idwaikat.me\/#\/schema\/person\/7738daf850bf9025cb97d4e728b96e05\"},\"breadcrumb\":{\"@id\":\"http:\/\/www.idwaikat.me\/?p=101#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.idwaikat.me\/?p=101\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.idwaikat.me\/?p=101#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"http:\/\/www.idwaikat.me\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JSON – Basic Intro\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.idwaikat.me\/#website\",\"url\":\"http:\/\/www.idwaikat.me\/\",\"name\":\"Eng. Ibrahim Dwaikat\",\"description\":\"Be better than expected\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.idwaikat.me\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.idwaikat.me\/#\/schema\/person\/7738daf850bf9025cb97d4e728b96e05\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.idwaikat.me\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/2.gravatar.com\/avatar\/8647144a952284a7cf0336a3632931a4?s=96&d=mm&r=g\",\"contentUrl\":\"http:\/\/2.gravatar.com\/avatar\/8647144a952284a7cf0336a3632931a4?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/www.idwaikat.me\"],\"url\":\"http:\/\/www.idwaikat.me\/?author=1\"}]}<\/script>\r\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"JSON - Basic Intro - Eng. Ibrahim Dwaikat","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.idwaikat.me\/?p=101","og_locale":"en_US","og_type":"article","og_title":"JSON - Basic Intro - Eng. Ibrahim Dwaikat","og_description":"JSON (pronounced like “Jason“): short for JavaScript Object Notation, is a lightweight computer data interchange format. It is a text-based, human-readable format for representing simple data structures and associative arrays. The official Internet media type for JSON is “application\/json“. The JSON file extension is .json. The JSON format is often used for serialization, transmitting structured Read More","og_url":"http:\/\/www.idwaikat.me\/?p=101","og_site_name":"Eng. Ibrahim Dwaikat","article_published_time":"2009-07-12T20:01:19+00:00","article_modified_time":"2009-08-15T18:54:42+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.idwaikat.me\/?p=101","url":"http:\/\/www.idwaikat.me\/?p=101","name":"JSON - Basic Intro - Eng. Ibrahim Dwaikat","isPartOf":{"@id":"http:\/\/www.idwaikat.me\/#website"},"datePublished":"2009-07-12T20:01:19+00:00","dateModified":"2009-08-15T18:54:42+00:00","author":{"@id":"http:\/\/www.idwaikat.me\/#\/schema\/person\/7738daf850bf9025cb97d4e728b96e05"},"breadcrumb":{"@id":"http:\/\/www.idwaikat.me\/?p=101#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.idwaikat.me\/?p=101"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/www.idwaikat.me\/?p=101#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/www.idwaikat.me\/"},{"@type":"ListItem","position":2,"name":"JSON – Basic Intro"}]},{"@type":"WebSite","@id":"http:\/\/www.idwaikat.me\/#website","url":"http:\/\/www.idwaikat.me\/","name":"Eng. Ibrahim Dwaikat","description":"Be better than expected","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.idwaikat.me\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.idwaikat.me\/#\/schema\/person\/7738daf850bf9025cb97d4e728b96e05","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.idwaikat.me\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/8647144a952284a7cf0336a3632931a4?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/8647144a952284a7cf0336a3632931a4?s=96&d=mm&r=g","caption":"admin"},"sameAs":["http:\/\/www.idwaikat.me"],"url":"http:\/\/www.idwaikat.me\/?author=1"}]}},"_links":{"self":[{"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/posts\/101"}],"collection":[{"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=101"}],"version-history":[{"count":10,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/posts\/101\/revisions"}],"predecessor-version":[{"id":108,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=\/wp\/v2\/posts\/101\/revisions\/108"}],"wp:attachment":[{"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=101"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=101"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.idwaikat.me\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=101"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}