JSON Examples

Example1: 

var jsonNum = "{\"items\": [\"1\",\"2\",\"3\"]}";

var jsonString = "{\"items\" : [\"first\",\"begin \",\" test \",\"best\",\"last\",\"end\"] } " 

              var jsobj = Ext.JSON.decode(jsonString);

              console.log(jsobj.items[0]);  // returns array obj

                                    var recs = jsobj.items;

              

              var jsObject = JSON.parse(jsonNum); 

              console.log(jsObject.items[1]);

Example2:

var obj1 = {user:"John",age:22,country:"USA"};

var obj2 = {user:"Will",age:27,country:"UK"};

var obj3 = {user:"Abiel",age:19,country:"Mexico"};

var obj4 = {u1:obj1, u2:obj2, u3:obj3};

document.write(obj1.user);

document.write("

---

");

document.write(obj3.user+"is "+obj3.age+ " yrs old lives in"+ obj3.country);

obj3.country = "Italy";

document.write("

---

");

document.write(obj3.user+" lives in "+ obj3.country);

document.write("

---

");

document.writeln(obj4.u2.country); //UK

document.write("

---

");

document.writeln(obj4["u2"]["user"]);

var meats = ["beef","pork","lamb","fish"];

var fruit = ["apple","plumb","grape","orange" ];

var obj5 = { arr1:meats,arr2:fruit };

document.writeln(obj5.arr1[1]);

document.write("

---

");

document.write(obj5.arr2[3]);

document.write("

---

");

var jsonStr = 

{

    "name": "Product",

    "properties": {

        "id": {

            "type": "number",

            "description": "Product identifier",

            "required": true

        },

        "name": {

            "type": "string",

            "description": "Name of the product",

            "required": true

        },

        "price": {

            "type": "number",

            "minimum": 0,

            "required": true

        },

        "tags": {

            "type": "array",

            "items": {

                "type": "string"

            }

        },

        "stock": {

            "type": "object",

            "properties": {

                "warehouse": {

                    "type": "number"

                },

                "retail": {

                    "type": "number"

                }

            }

        }

    }

};

document.write("Nested object: "+jsonStr.properties.id.description);

document.write("

---

");

var myObject = {

  "first": "John",

  "last": "Doe",

  "age": 39,

  "sex": "M",

  "salary": 70000,

  "registered": true,

  "interests": [ "Reading", "Mountain Biking", "Hacking" ],

  "favorites": {

    "color": "Blue",

    "sport": "Soccer",

    "food": "Spaghetti"

  }, 

  "skills": [

    {

      "category": "JavaScript",

      "tests": [

        { "name": "One", "score": 90 },

        { "name": "Two", "score": 96 }

      ] 

    },

    {

      "category": "CouchDB",

      "tests": [

        { "name": "One", "score": 79 },

        { "name": "Two", "score": 84 }

      ] 

    },

    {

      "category": "Node.js",

      "tests": [

        { "name": "One", "score": 97 },

        { "name": "Two", "score": 93 }

      ] 

    }

  ]

};

document.writeln(myObject.skills[0].category);

document.write("

---

");

document.writeln(myObject["skills"][0]["category"]);

document.write("

---

");

document.writeln(myObject.skills[1].tests[0].score); 

document.writeln(myObject["skills"][1]["tests"][0]["score"]);

Example 3:

// php:

/*

header("Content-Type: application/json"); //set the content type to xml

$jsonData = ' {

"u1": { "user":"John","age":22,"country":"United States"},

"u2": { "user":"Will","age":27,"country":"United Kingdom"},

"u3": { "user":"Raja","age":19,"country":"India"},

"u4": { "user":"Rick","age":19,"country":"Mexico"}

}';

echo $jsonData;

?>

*/

// javascript

function ajax_get_json(){

    // Create our XMLHttpRequest object

    var hr = new XMLHttpRequest(); 

    hr.open("GET", "my_json_list.php", true); // use json data 

    // Set content type header information for sending url encoded variables in the request

    hr.setRequestHeader("Content-type", "application/json");

    // Access the onreadystatechange event for the XMLHttpRequest object

   hr.onreadystatechange = function() {

   if(hr.readyState == 4 && hr.status == 200) {

   var data = JSON.parse(hr.responseText);

  var results = document.getElementById("results");

document.getElementById("users").innerHTML = data.u3.user;

//results.innerHTML = data.u2.user+" is "+data.u2.age+ " yrs old lives in "+ data.u2.country;

results.innerHTML = "";

for(var obj in data){  // loop complete json object

results.innerHTML += data[obj].user+" is "+data[obj].age+ " yrs and lives in "+ data[obj].country+"

---

" ;

 }

    }

    }

    

hr.send(null);  //use json data

    results.innerHTML = "requesting..."; // can use img tag, animated gif file

}