Detailed explanation of Json traversal steps with jquery

This time I will bring you a detailed explanation of the steps of jquery's traversal of Json. What are the precautions of jquery's traversal of Json. The following is a practical case, let's take a look.

Overview

JSON(javascript Object Notation) is a lightweight data exchange format that uses a complete Language-independent text format ideal for data exchange. At the same time, JSON is a JavaScript native format, which means that processing JSON data in JavaScript does not require any special API or toolkit.

In JSON, there are two structures: objects and arrays.

1. Object

An object starts with "{" and ends with "}". Each "key" is followed by a ":", and "'key/value' pairs" are separated by ",".

packJson = {"name":"caibaojian.com", "password":"111"}

2. Array

packJson = [{"name":"caibaojian.com", "password":"111"}, {"name":"tony", "password":"111"}];

An array is an ordered collection of values. An array starts with "[" and ends with "]". Use "," to separate values.

Conversion of JSON objects and JSON strings

In the data transmission process, json is text, that is It is passed in the form of a string, and JS operates on JSON objects, so the conversion between JSON objects and JSON strings is the key. For example:

JSON string:

var jsonStr = '{"name":"caibaojian", "password":"1111"}';

JSON object:

var jsonObj = {"name":"caibaojian.com", "password":"1111"};

1. Convert String to Json object

var jsonObj = eval('(' + jsonStr + ')');

2. Convert Json object to String

var jsonStr = jsonObj.toJSONString();

jQuery traverses json object

grep

<script type=&#39;text/javascript&#39; src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var array = [1,2,3,4,5,6,7,8,9];
var filterarray = $.grep(array,function(value){
return value > 5;//筛选出大于5的
});
for(var i=0;i<filterarray.length;i++){
alert(filterarray[i]);
}
for (key in filterarray){
alert(filterarray[key]);
}
}
);
</script>

each

<script type=&#39;text/javascript&#39; src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anObject = {one:1,two:2,three:3};//对json数组each
$.each(anObject,function(name,value) {
alert(name);
alert(value);
});
var anArray = ['one','two','three'];
$.each(anArray,function(n,value){
alert(n);
alert(value);
}
);
}
);
</script>

inArray

<script type=&#39;text/javascript&#39; src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var anArray = ['one','two','three'];
var index = $.inArray('two',anArray);
alert(index);//返回该值在数组中的键值，返回1
alert(anArray[index]);//value is two
}
);
</script>

map

<script type=&#39;text/javascript&#39; src="/jquery.js"></script>
<script type="text/javascript">
$().ready(
function(){
var strings = ['0','1','2','3','4','S','6'];
var values = $.map(strings,function(value){
var result = new Number(value);
return isNaN(result) ? null:result;//isNaN:is Not a Number的缩写
}
);
for (key in values) {
alert(values[key]);
}
}
);
</script>

Native js traverse json object

##Traverse json object:

Irregular:

<script>
var json = [{dd:'SB',AA:'东东',re1:123},{cccc:'dd',lk:'1qw'}];
for(var i=0,l=json.length;i<l;i++){
for(var key in json[i]){
alert(key+':'+json[i][key]);
}
}
</script>

Regular:

packJson = [
{"name":"nikita", "password":"1111"},
{"name":"tony", "password":"2222"}
];
for(var p in packJson){//遍历json数组时，这么写p为索引，0,1
  alert(packJson[p].name + " " + packJson[p].password);
}

You can also use this:

for(var i = 0; i < packJson.length; i++){
  alert(packJson[i].name + " " + packJson[i].password);
}

Traverse json objects

myJson = {"name":"caibaojian", "password":"1111"};
for(var p in myJson){//遍历json对象的每个key/value对,p为key
  alert(p + " " + myJson[p]);
}

has the following json objects:

var obj ={"name":"冯娟","password":"123456","department":"技术部","sex":"女","old":30};
遍历方法：
for(var p in obj){
str = str+obj[p]+',';
return str;
}

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed explanation of the steps of asp processing json data

htmlDetailed explanation of the method of directly displaying JSON

The above is the detailed content of Detailed explanation of Json traversal steps with jquery. For more information, please follow other related articles on the PHP Chinese website!