Web programming Tutorial: json

<div dir="ltr" style="text-align: left;" trbidi="on">
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhV17MSbiGMXiGgPhgQ4LkyLZ3avtltTGxJ4Nn0Rcf7wIv5a4h7lgnWo5FDxoyXU9qTcYlMJkGFtcWriV_v-7c1-OWb1cfQNGoWeiNNHB6NkHfHh_NV3HQ1gKY7P_bZFesjXykmldhNsrB/s1600/json.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="188" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhV17MSbiGMXiGgPhgQ4LkyLZ3avtltTGxJ4Nn0Rcf7wIv5a4h7lgnWo5FDxoyXU9qTcYlMJkGFtcWriV_v-7c1-OWb1cfQNGoWeiNNHB6NkHfHh_NV3HQ1gKY7P_bZFesjXykmldhNsrB/s320/json.jpg" width="320" /></a></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
What is JSON, and what can it do? In this tutorial you learn how to use JSON to easily move data around the web. You also look at how to work with JSON using both JavaScript and PHP. If you’ve developed websites or web apps at all, you’ve probably heard of JSON, at least in passing. But what exactly is JSON? What can it do, and how do you use it? In this tutorial you’ll learn the basics of JSON.<span id="more-1552" style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></span></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
You’ll look at the following topics:</div>
<ul style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">What JSON does</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">The kinds of things JSON is used for</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">How to create JSON strings</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">A simple JSON example</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">How JSON compares to XML, and</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">How to work with JSON using both JavaScript and PHP.</li>
</ul>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
Let’s get started!</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
What is JSON?</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JSON is a simple, text-based way to store and transmit structured data. By using a simple syntax, you can easily store anything from a single number through to strings, arrays, and objects using nothing but a string of plain text. You can also nest arrays and objects, allowing you to create complex data structures.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
Once you’ve created your JSON string, it’s easy to send it to another application or computer, because it’s just plain text.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JSON has a lot of advantages:</h1>
<ul style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style: square; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">It’s compact</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">It’s easy for both computers and people to read and write</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">It maps very easily onto the data structures used by most programming languages (numbers, strings, booleans, nulls, arrays and associative arrays)</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Nearly all programming languages contain functions or libraries that can read and write JSON structures</li>
</ul>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note:</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JSON stands for JavaScript Object Notation. As the name implies, it’s based on the way you define objects (which are very similar to what you’d call associative arrays or hashes in other languages), and arrays.</strong></div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
How does it work?</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
JSON is capable of setting up data constructs for integers, strings, arrays, and booleans – the most essential data building blocks. Using a carefully defined syntactical construct, JSON can be used to outline an object and with the use of javascript’s eval() function, they can be converted to a working object.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
But the power does not end there. Other popular programming languages have been implementing native support for JSON, such as PHP and ActionScript. For example, PHP can now convert an associative array of data into a JSON string by using the new json_encode() function, provided in version 5.2+ of the language. For languages without native support, you can find a full range of implementation classes available at the <a href="http://json.org/" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;" title="http://json.org/">JSON website</a>.</div>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">How to write JSON</em> Syntax:</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Declaration</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline;">
All JSON objects are declared with a pair of curly braces. You can assign them to a variable like you would any other data structure.</div>
<pre>var myObj = {}</pre>
<pre>
</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
That’s it! While not very powerful, this is all that’s required to create objects using JSON. So let’s start adding some properties to this object.</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Strings</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
We are going make this object represent me, so let’s start by adding my name.</div>
<pre>var myObj = {name: 'Nahid'}
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Let’s take a second to carefully look at what we did here. We wanted to add a property called “name”, and to do so, you simply write the property, “name”. We follow the property label by a colon to separate the property name and its value. To the right of the colon, comes the value. Since we wanted the value to be a string, we put it in quotes.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
With the JSON we have put in place, you are now able to access the property by using the dot notation. To access a property, follow the “Variable [dot] property” construct.
</div>
<pre>alert(myObj.name) // "Nahid"</pre>
<pre>
</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Integers</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
If we wanted to assign a property to the object of an integer data type, there is no need to quote the value.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
<span style="background-color: transparent; text-align: left;">var myObj = {age: 24}</span></div>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; text-align: justify; white-space: normal;">Multiple properties are separated by a comma.</span></pre>
<pre>var myObj = {name: 'Nahid', age: 24}

alert("My name is " + myObj.name + " and I'm " + myObj.age);

// "My name is Nahid and I'm 24</pre>
<pre>
</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Booleans</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
Like integers, booleans are also unquoted</div>
<pre>var myObj = {name: 'Nahid', age: 24, engaged: true}</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Arrays</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Arrays can contain a collection of the previously mentioned data types. To define an array, wrap the value in square brackets and separate the values with commas.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note: I will now add line breaks and indentation for legibility. It has no bearing on the working order of the object.</em></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></em></div>
<pre>var myObj = {

age: 24,

engaged: true,

favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild']

}</pre>
<pre>
</pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">You can access a value in an array in the object by using a combination of the dot notation (to access the objects property) and index notation (to access an indexed value of an array).</span></pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">
</span></pre>
<pre>alert(myObj.favorite_tv_shows[1]); // "Dirty Jobs"</pre>
<pre>
</pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">To take the array complexity one step further, an array can also contain other objects.</span></pre>
<pre>var myObj = {

age: 24,

engaged: true,

favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild'],

family_members: [

{name: "Nahid", age: 27, relation: "father"},

{name: "Tina", age: 24, relation: "sister"}

]

}</pre>
<pre>
</pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">This still requires dot and index notation, with an additional dot notation for accessing the property of the object found in the indexed array value.</span></pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">
</span></pre>
<pre>alert(myObj.family_members[1].name) // "Tina"</pre>
<pre>
</pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">There is one situation where you will use square brackets to access an objects property and not the dot notation: when you are using a variable as the property name. For example:</span></pre>
<pre><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">
</span></pre>
<pre>var myObj = {

age: 27,

engaged: true,

favorite_tv_shows: ['Lost', 'Dirty Jobs', 'Deadliest Catch', 'Man vs Wild'],

family_members: [

{name: "Nahid", age: 57, relation: "father"},

{name: "Tina", age: 26, relation: "sister"}

]

}

var property = "age"

alert(myObj[property]); // "24"</pre>
<pre>
</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Recap</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Take some time experimenting with JSON and you will see that you can pick up the concept and syntax rather quickly. As a caveat that may save you time in the future: certain languages require you to quote the property names, such as ActionScript. If not, it will complain.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="background-color: transparent;">myObj = {name: "Nahid"} // will complain</span></div>
<pre>myObj = {"name": "Nahid"} // will work</pre></pre>
<pre>
</pre>
<pre>
</pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Creating Object in JavaScript using JSON</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
We can create objects in JSON with JavaScript in many ways :</div>
<ol style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“var JSONObjectName ={};” will create an empty object.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“var JSONObjectName= new Object();” will create a new Object.</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“var JSONObjectName = { “name “:”Fahad”, “age”:23}; will create an Object with attribute name which contains value in String and age with numeric value.</li>
</ol>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Now by creating this object we can access attributes by only “.” operator.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Here is the full example code for creating an Object in JavaScript using JSON:
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">ObjectJavaScript-JSON.htm</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong></div>
<pre><html>
<head>
<title>
 Object creation in JSON in JavaScript
</title>
<script language="javascript" >
var JSONObject = {  "name" : "Fahad",
  "address"  : "420 Hatirpool",
  "age"  : 23,
   "phone"   : "011-4565763",
   "MobileNo"  : 0981100092
  };
document.write("<h2><font color='blue'>Name</font>::"
   +JSONObject.name+"</h2>");
document.write("<h2><font color='blue'>Address</font>::"
   +JSONObject.address+"</h2>");
document.write("<h2><font color='blue'>Age</font>::"
   +JSONObject.age+"</h2>");
document.write("<h2><font color='blue'>Phone No.</font>::"
   +JSONObject.phone+"</h2>");
document.write("<h2><font color='blue'>Mobile No.</font>::"
   +JSONObject.MobileNo+"</h2>");
</script>
</head>
<body>
<h3>Example of object creation in JSON in JavaScript</h3>
</body>
</html></pre>
<pre>
</pre>
<pre><h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Output:</h1>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="border: 0px; color: blue; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Name</span>::Fahad</h2>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="border: 0px; color: blue; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Address</span>::420 Hatirpool</h2>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="border: 0px; color: blue; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Age</span>::23</h2>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="border: 0px; color: blue; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Phone No.</span>::011-4565763</h2>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<span style="border: 0px; color: blue; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mobile No.</span>::981100092</h2>
<h1 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Example of object creation in JSON in JavaScript</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Creating Array Objects in JavaScript with JSON</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
In This example we have created an object <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students” </strong>which contains two array objects “<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Maths</strong>” and “<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Science</strong>” containing name, marks and age of two students. Now we can access these objects value in the following way:</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students.Maths”</strong> for accessing <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Maths</strong> array and <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students.Science” </strong>for accessing <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Science</strong> array object. Now to access first element of the <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Maths</strong> array we can write it as <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students.Maths[1]” </strong>and then we can access elements of this array as <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students.Maths[1].Name”</strong> for name and<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">“students.Maths[1].Marks” </strong>for marks of the first student in <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Maths</strong> and so on.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Here is the full example code for <strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JavaScript-JSONArray.htm</strong> file.</div>
<pre><html>
<head>
<title>
Array JSON-JavaScript Example
</title>
<script language="javascript" >
var students = { "Maths" : [

{"Name" : "Fahad", // First element
  "Marks" : 67,
 "age" : 23 },
{"Name"  : "Vimrul",  // Second element
 "Marks" : 65,
 "age" : 21 }
 ],
"Science" :  [
{"Name"  : "Mizan",  // First Element
 "Marks" : 56,
 "age" : 27 },
  {"Name"  : "Mithu",  // Second Element
  "Marks" : 78,
 "age" : 41 }
 ]
  }
  // Printing all array values
var i=0
document.writeln("<table border='1'><tr>");
for(i=0;i<students.Maths.length;i++)
{
  document.writeln("<td>");
  document.writeln("<table border='0'  width=100 >");
  document.writeln("<tr><td><B>Name</B></td><td width=50>"
  +students.Maths[i].Name+"</td></tr>");
  document.writeln("<tr><td><B>Marks</B></td><td width=50>"
  +students.Maths[i].Marks +"</td></tr>");
  document.writeln("<tr><td><B>Age</B></td><td width=50>"
  +students.Maths[i].age +"</td></tr>");
  document.writeln("</table>");
  document.writeln("</td>");
}
for(i=0;i<students.Science.length;i++)
{
  document.writeln("<td>");
  document.writeln("<table border='0'  width=100 >");
  document.writeln("<tr><td><B>Name</B></td><td width=50>"
   +students.Science[i].Name+"</td></tr>");
  document.writeln("<tr><td><B>Marks</B></td><td width=50>"
   +students.Science[i].Marks +"</td></tr>");
  document.writeln("<tr><td><B>Age</B></td><td width=50>"
   +students.Science[i].age +"</td></tr>");
  document.writeln("</table>");
  document.writeln("</td>");
}
document.writeln("</tr></table>");
</script>
</head>
<body>
Using Array of objects via JSON in JavaScript
</body>
</html></pre>
<pre>
</pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Output:</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<a href="http://www.w3programmers.com/introduction-to-json-with-php/javascript-json-2/" rel="attachment wp-att-1556" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;"><img alt="javascript json example" class="aligncenter size-full wp-image-1556" height="128" src="http://www.w3programmers.com/wp-content/uploads/2012/11/javascript-json1.jpg" style="border: 1px solid rgb(221, 221, 221); clear: both; display: block; height: auto; margin: 0.4em auto 1.625em; max-width: 97.5%; padding: 6px; width: auto;" title="javascript json example" width="478" /></a></div>
<h2 style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
How to create and read JSON strings in PHP</h2>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnNBCLRHwMEpf_M09bVcG9K_tL-vvkzk4hKtsqGPYNiy9C1pmdAfHjWyA2mvrA9ngRDzFfPuCnOh73-yB0pdmyoJwBJ2kzzLI75voGX16aEtyxpUqZFVPtqh9Lg91PZ0EAbxJWfzR1dGj/s1600/471449_10150729328028578_726593577_9728613_879401231_o.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="213" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisnNBCLRHwMEpf_M09bVcG9K_tL-vvkzk4hKtsqGPYNiy9C1pmdAfHjWyA2mvrA9ngRDzFfPuCnOh73-yB0pdmyoJwBJ2kzzLI75voGX16aEtyxpUqZFVPtqh9Lg91PZ0EAbxJWfzR1dGj/s320/471449_10150729328028578_726593577_9728613_879401231_o.jpg" width="320" /></a></div>
<div>
</div>
<div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
PHP, like JavaScript, has functions that can convert variables to JSON strings and vice-versa. Let’s take a look at them.</div>
<h3 style="background-color: white; border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CREATING A JSON STRING FROM A PHP VARIABLE</strong></h3>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<a href="http://php.net/manual/en/function.json-encode.php" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">json_encode()</a> takes a PHP variable and returns a JSON string representing the variable. Here’s our shopping cart example written in PHP:</div>
<pre><?php

$cart = array(

"orderID" => 12345,

"shopperName" => "Faisal Ahmed",

"shopperEmail" => "faisal@gmail.com",

"contents" => array(

array(

"productID" => 34,

"productName" => "SuperWidget",

"quantity" => 1

array(

"productID" => 56,

"productName" => "WonderWidget",

"quantity" => 3

)

"orderCompleted" => true

);

echo json_encode( $cart );

?></pre>
<pre>
</pre>
<pre>
</pre>
</div>
</pre>
</pre>
</pre>
</pre>
</pre>
</pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
This produces exactly the same output as our JavaScript example — a valid JSON string representing the variable’s contents:</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Output:</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<samp style="border: 0px; font-family: Monaco, Consolas, 'Andale Mono', 'DejaVu Sans Mono', monospace; font-size: 13px; line-height: normal; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">{“orderID”:12345,”shopperName”:”Faisal Ahmed”,”shopperEmail”:”faisal@gmail.com”,”contents”:[{"productID":34,"productName":"SuperWidget","quantity":1},{"productID":56,"productName":"WonderWidget","quantity":3}],”orderCompleted”:true}</samp>In a real-world online store, your PHP script would send this JSON string as part of the Ajax response back to the browser, where the JavaScript code would use JSON.parse() to turn the string back into a variable so it can display the cart’s contents to the shopper.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Note:</strong> You can also pass various flags as a second argument to json_encode(). These let you do things like encode certain special characters using hex notation to make the string more portable, and force empty and indexed arrays to be encoded as objects (associative arrays). <a href="http://www.php.net/manual/en/function.json-encode.php" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">Find out more</a>.</div>
<h3 style="background-color: white; border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">CREATING A PHP VARIABLE FROM A JSON STRING</strong></h3>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
To go the other way and convert a JSON string into a PHP variable, you use — you guessed it —<a href="http://www.php.net/manual/en/function.json-decode.php" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">json_decode()</a>. Let’s rewrite our JavaScript JSON.parse() example in PHP:</div>
<pre><?php

$jsonString = '

{

"orderID": 12345,

"shopperName": "Faisal Ahmed",

"shopperEmail": "faisal@gmail.com",

"contents": [

{

"productID": 34,

"productName": "SuperWidget",

"quantity": 1

{

"productID": 56,

"productName": "WonderWidget",

"quantity": 3

}

"orderCompleted": true

}

$cart = json_decode( $jsonString );

echo $cart->shopperEmail . "<br>";

echo $cart->contents[1]->productName . "<br>";

?></pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
As with the JavaScript version, this produces the following output:</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
faisal@gmail.com
WonderWidget</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
By default, json_decode() returns JSON “objects” as actual PHP objects. These are generic PHP objects of the stdClass class. That’s why we used -> to access the objects’ properties in the example above.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
If you’d rather return JSON objects as PHP associative arrays, just pass true as a second argument to json_decode(). For example:</div>
<pre>$cart = json_decode( $jsonString, true );

echo $cart["shopperEmail"] . "<br>";

echo $cart["contents"][1]["productName"] . "<br>";
 </pre>
<pre><div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">This displays the same output:</strong>
faisal@gmail.com
WonderWidget</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Convert a PHP Class to JSON</strong></div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
As json_encode() is recursive, you can use it to serialize whole structure of objects.</div>
<pre></pre>
<?php

class A {

public $a = 1;

public $b = 2;

public $collection = array();

function __construct(){

for ( $i=3; $i>0; $i--){

array_push($this->collection, new B);

}

class B {

public $a = 1;

public $b = 2;

}
echo "<pre>";
echo json_encode(new A);

?>
</pre>
<div>
</div>
<div>
</div>
<div>
<pre style="background-color: #f4f4f4; border: 0px; color: #373737; font-family: 'Courier 10 Pitch', Courier, monospace; font-size: 12px; line-height: 1.5; margin-bottom: 1.625em; outline: 0px; overflow: auto; padding: 0.75em 1.625em; vertical-align: baseline;">Will give:

{

"a":1,

"b":2,

"collection":[{

"a":1,

"b":2

},{

"a":1,

"b":2

},{

"a":1,

"b":2

}]

}</pre>
</div>
</pre>
</pre>
</pre>
</pre>
</pre>
</pre>
<h1 align="center" style="background-color: white; border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline;">
Combining PHP, JSON and jQuery</h1>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Now I’ll show you how simple it is to make PHP communicate with a JSON data source using jQuery’s Ajax functionality.</em><br /><em style="border: 0px; font-family: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></em><br /><strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 1:</strong><br />First we’re going to create a form with a dynamic dropdown. The dropdown will show a list of cities that we retrieve from a JSON datasource.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 2:</strong><br />Our first step is to create the script that sends the JSON data. We load up our editor. I’ve already created a few blank scripts here but we’ll fill these in as we go.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 3:</strong><br />So json.php. We create an array. This is just a PHP array with a list of cities. Adelaide, Perth, Melbourne Sydney. And we can send back this in JSON format – which is basically just JavaScript code – using json_encode(). We just pass the array and save the script.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 4:</strong><br />Now, back in Chrome we load the file (index.php). That’s the array we just created. If you actually look in developer tools, the script is here under resources. It’s sent it with content type text/html. Technically this isn’t really a problem. It will work, but to be correct it needs to be application/json content type.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 5:</strong><br />So just back in json.php use the header() function, content-type and then save, reload. Now if we look here, it’s application/json and Chrome gives us a warning here, that’s just because we tried to display it as a normal HTML page even though it’s not.</div>
<div style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Listing 1</strong> The JSON data source (json.php)</div>
<pre><?php
    $cities = array(
        'Adelaide',
        'Perth',
        'Melbourne',
        'Sydney'
    );

header('Content-type: application/json');
    echo json_encode($cities);
?></pre>
<pre>
</pre>
<pre><strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">Step 6:</strong>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">That’s the data source done. Next we’re going to create some JavaScript to actually output that. Let’s go back here. The script we’ll just update now to load a select box. Now this doesn’t actually do anything, all we’re going to do is populate this. So let’s call it city, and give it an id of #city-list, so we can refer to it later in our JavaScript. And we’ll just put a blank element that instructs the user to select a city. And we save that, and then go back to the index.php script.</span>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Step 7:</strong>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">Now we’ve got this dropdown which we’ll populate shortly. We’re using jQuery in this. To make things a little bit simpler we’re going to use Google’s hosted version of jQuery. We can search </span><a href="http://www.google.com/search?q=jquery+google" style="background-color: white; border: 0px; color: #20747f; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; white-space: normal;">Google jQuery</a><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;"> and I think it’s </span><a href="http://code.google.com/apis/ajaxlibs/documentation/" style="background-color: white; border: 0px; color: #20747f; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; white-space: normal;">the first link</a><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">. So we just click on </span><a href="http://code.google.com/apis/ajaxlibs/documentation/#jquery" style="background-color: white; border: 0px; color: #20747f; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline; white-space: normal;">jQuery</a><span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;"> and it shows you the versions that they host. You can either use their loader or just go straight to the path. We’ll get the minified version (jquery.min.js) because it loads quicker. We don’t need the full source code.</span>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Step 8:</strong>
<span style="background-color: white; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; white-space: normal;">So let’s just load that here. So that’s all we need to do to import jQuery into our script, and we’re about to create this script.js file, so we’ll just load that one as well.</span>
<strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">The main index file that displays the form (index.php)</strong></pre>
<pre><strong style="background-color: white; border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;"><pre style="color: black; font-weight: normal; line-height: normal;"><html>
    <head>
        <title>JSON Example - w3programmers.com</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div>
            <h1>PHP + jQuery Example - PhpRiot.com</h1>
             <select name="city" id="city-list">
                <option value="">Select a city...</option>
            </select>
        </div>
    </body>
</html></pre>
<pre style="color: black; font-weight: normal; line-height: normal;"><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 8:</strong>
Okay so that’s now loading, it doesn’t actually do anything yet, but what we can do is just ensure that jQuery is loaded. So this is the “on dom loaded” event. Save that one and go back to the browser. We don’t need this any more, now refresh. Hopefully we’ll get an alert box just to ensure that jQuery is loaded, and there we go. That means we can keep going.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 9:</strong>
Now, we go back, we can remove this alert. Now what we want to do is use the jQuery getJSON() function. So for that, we call $.getJSON(). The script is called json.php, so put that in, and the callback is the second argument, and when the callback is called the data returned from the script is passed as the first argument.</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Step 10:</strong>
So that’s our placeholder. You can have a look at that before we do anything with it. Just throw in a console.log(), pass the data, save and return the Chrome. Now if you load developer tools. Let’s refresh this page. So now you can see this script here after the JavaScript is loaded it performed the JSON query. So that’s what we created earlier on but you can this output that we wrote to the console. So we’re most of the way there, all we need to do now is use this data to populate the select box.
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Step 11:</strong>
So returning to our editor. So we just call $.each(), pass the array as the first argument and the callback as the second. The first argument to the callback is the index, so 0, 1, 2, 3 in this case, and the second argument is the value, which is the name of the city, which is what we’re going to use.
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">
Step 12:</strong>
For each iteration of this loop we’re going to write a new option to the select box. So first we need to get the select box. So we’re going to call it var select, and we called that #city-list, and then in each iteration option, create the new option, so we set the value attribute, so when the form is submitted the value is passed in, and we set the HTML using the .html() function, so we just pass the city name again. And finally we append it to the select, so appendTo(select).</div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JavaScript to populate the select box with JSON (script.js)</strong></div>
<div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"></strong></div>
<pre>jQuery(function($) {
        $.getJSON('json.php', function(json) {
                var select = $('#city-list');
                 $.each(json, function(k, v) {
                        var option = $('<option />');
                         option.attr('value', v)
                              .html(v)
                              .appendTo(select);
                });
        });
});</pre>
<pre><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Final: </strong>
Now we can save, return to Chrome, and refresh. Now we’ve got our developer tools still open so you can see they’re all appearing here, and in the dropdown. And that’s all there is to it! Now we haven’t actually done anything with this list, but you can use this inside your normal forms, or you can trigger the load after a particular btuton is pressed. Here we’ve just made it simple and doing it onload, but you can really do it however you need to.</div>
<h1 align="center" style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Combining PHP, JSON, MySQL and jQuery</h1>
<ol start="1" style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; list-style-image: initial; list-style-position: initial; margin: 0px 0px 1.625em 2.5em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">json-jquery.js – js file to request the data</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">json-data.php – php file to connect to database to retrieve data</li>
<li style="border: 0px; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">page.html – html page to call/display data</li>
</ol>
<h3 style="border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JSON-JQUERY.JS</strong></h3>
<div>
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;">$(document).ready(function(){

//attach a jQuery live event to the button

$('#getdata-button').live('click', function(){

$.getJSON('json-data.php', function(data) {

//alert(data); //uncomment this for debug

//alert (data.item1+" "+data.item2+" "+data.item3); //further debug

$('#showdata').html("<p>item1="+data.item1+" item2="+data.item2+" item3="+data.item3+"</p>");

});

});</pre>
<pre style="font-weight: normal;"><h3 style="border: 0px; clear: both; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 10px; font-weight: inherit; letter-spacing: 0.1em; line-height: 2.6em; margin: 0px; outline: 0px; padding: 0px; text-transform: uppercase; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">JSON-DATA.PHP</strong></h3>
<div>
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;"><pre style="font-weight: normal;"><?php

//request data from the database

//code here to connect to database and get the data you want

/* Example JSON format

{

"item1": "I love PHP and JSON",

"item2": "You love PHP and JSON",

"item3": "We love PHP and JSON"

}

//return in JSON format

echo "{";

echo "item1: ", json_encode($item1), "\n";

echo "item2: ", json_encode($item2), "\n";

echo "item3: ", json_encode($item3), "\n";

echo "}";

?></pre>
<pre style="font-weight: normal;"><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
<strong style="border: 0px; font-family: inherit; font-style: inherit; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Alternative methods</strong></div>
<h1 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
Create an array in PHP and use the <a href="http://php.net/manual/en/function.json-encode.php" style="border: 0px; color: #20747f; font-family: inherit; font-style: inherit; font-weight: inherit; margin: 0px; outline: 0px; padding: 0px; text-decoration: none; vertical-align: baseline;">json_encode()</a> function to encode the whole array.</h1>
<div>
<pre><?php

$arr = array ('item1'=>"I love jquery4u",'item2'=>"You love jQuery4u",'item3'=>"We love jQuery4u");

echo json_encode($arr);

?></pre>
<pre><div style="border: 0px; color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 24px; margin-bottom: 1.625em; outline: 0px; padding: 0px; text-align: justify; vertical-align: baseline; white-space: normal;">
This will output the array in the correct JSON format; however it may not include line breaks as the previous example shows so make sure you check this by alerting the data. There is also a json_decode() function which does the opposite.</div>
<h2 style="border: 0px; clear: both; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 15px; line-height: 24px; margin: 0px 0px 0.8125em; outline: 0px; padding: 0px; vertical-align: baseline; white-space: normal;">
page.html</h2>
<div>
<pre><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">

<head>

<title>Request json test</title>

</head>

<body>

</body>

</html></pre>
</div>
</pre>
</div>
</pre>
</strong></div>
</pre>
</strong></div>
</pre>
</pre>
</strong></pre>
</div>

How call a json with get data in php

What is JSON, and what can it do? In this tutorial you learn how to use JSON to easily move data around the web. You also look at how to...