JQuery jason
From w3cyberlearnings
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
Related Links
String and Selector
