JQuery jason

From CoderLearner
Jump to: navigation, search

Access Json

<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script 
            type="text/javascript" 
            src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
        </script>
        <script type="text/javascript">
            $(document).ready(function(){
                var myJson={
                    "person":[
                        {'name':'Paul','age':21,'address':'Texas,USA'},
                        {'name':'Janny','age':23,'address':'Louisiana,USA'},
                        {'name':'Lili','age':25,'address':'Peijing,China'}
                    ]
                }
                
                var first_Element = myJson.person[0];
                $('div').html(first_Element.name);
                
            });
        </script>
    </head>
    <body>
        <div>TODO write content</div>
    </body>
</html>

Create JSON in jQuery

var myJson={
      "person":[
           {'name':'Paul','age':21,'address':'Texas,USA'},
           {'name':'Janny','age':23,'address':'Louisiana,USA'},
           {'name':'Lili','age':25,'address':'Peijing,China'}
       ],
       'salary': [
           {'total':40000},
           {'total':50000},
           {'total':60000}
       ]
                   
}

Access individual JSON data

      var name= myJson.person[0].name;       // Paul
      var age= myJson.person[0].age;         // 21
      var address= myJson.person[0].address; // Texas,USA
      var salary = myJson.salary[1].total;   // 50000

Access JSON data with $.each()

    var first_Element = myJson.person[0]; // Paul
    var second_Element = myJson.person[1]; //Janny
                
    $.each(first_Element,function(i,element){
                    alert(element);
    });
                

Return result

Paul
21
Texas, USA

Access JSON data and list all the user name by using index

$(document).ready(function(){
     var myJson={
         'person':[
               {'name':'Paul','age':21,'address':'Texas,USA'},
               {'name':'Janny','age':23,'address':'Louisiana,USA'},
               {'name':'Lili','age':25,'address':'Peijing,China'}
          ],
         'salary': [
                        {'total':40000},
                        {'total':50000},
                        {'total':60000}
         ]
                   
     }
      // person name
     $.each(myJson.person,function(i,element){
                    alert(myJson.person[i].name);
      });
                
});

Access JSON data using element (The same as above)

   $.each(myJson.person,function(i,element){
             alert(element.name);
   });

Display Result

  Paul
  Janny
  Lili

Complex JSON data

       
var myJson={
      "person":[
             {'name':'Paul','age':21,'address':'Texas,USA'},
             {'name':'Janny','age':23,'address':'Louisiana,USA'},
             {'name':'Lili','age':25,'address':'Peijing,China'}
      ],
      'salary': [
             {'total':40000,'data':[{'code':31,'dept':'IT'},{'code':30,'dept':'CS'}]},
             {'total':50000,'data':[{'code':33,'dept':'HR'},{'code':51,'dept':'HR2'}]},
             {'total':60000,'data':[{'code':89,'dept':'ACC'},{'code':81,'dept':'IACC'}]}
         ]
                   
};

Access individual complex JSON data

var mycode = myJson.salary[0].data[0].code; // 31
var mydept = myJson.salary[0].data[0].dept; // IT

Access complex JSON data using $.each() method

   $.each(myJson.salary[0].data,function(i,element){
                    alert(element.code);
   });

Display Result

 31 
 30

Access complex JSON data using $.each() method

$.each(myJson.salary,function(i,element){
      alert(myJson.salary[i].data[0].code);
});

Display Result

  31
  33
  89

Same as above but (access the second index)

$.each(myJson.salary,function(i,element){
      alert(myJson.salary[i].data[1].code);
});

Display Result

  30
  51
  81

Accesss all department in the complex JSON data using $.each()

<script type="text/javascript">
    $(document).ready(function(){
       var myJson={
         'person':[
             {'name':'Paul','age':21,'address':'Texas,USA'},
             {'name':'Janny','age':23,'address':'Louisiana,USA'},
             {'name':'Lili','age':25,'address':'Peijing,China'}
          ],
         'salary': [
             {'total':40000,'data':[{'code':31,'dept':'IT'},{'code':30,'dept':'CS'}]},
             {'total':50000,'data':[{'code':33,'dept':'HR'},{'code':51,'dept':'HR2'}]},
             {'total':60000,'data':[{'code':89,'dept':'ACC'},{'code':81,'dept':'IACC'}]}
         ]
                   
       };
             
       $.each(myJson.salary,function(i,element){
            $.each(myJson.salary[i].data,function(i2,element2){
                        alert(element2.dept);
            });
       });
                
          
     });
</script>

Display Result

 IT
 CS
 HR
 HR2
 ACC
 IACC

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>