JavaScript--解析JSon数据--JS对象、数组

在线代码测试：http://tool.lu/coderunner/

JavaScript实例代码：

需求一：

 将一个JSon字符串（标准的格式），按照“键”拆分。

var menuId = [];
var percode = [];
var data = [{menuId: "0010", percode : "PZ011"},{menuId : "0011", percode : "PZ012"}];
for(var i = 0; i<data.length; i++){
menuId.push(data[i].menuId);
}

for(var i = 0; i<data.length; i++){
percode.push(data[i].percode);
}
console.log("新的json1:"+JSON.stringify(menuId));
console.log("新的json2:"+JSON.stringify(percode));

需求二：

 将一个JSon字符串（标准的格式），按照“键”拆分并放到一个对象里面去。

var array = [];
var data = [
{menuId : "0010", percode : "PZ011"},
{menuId : "0011", percode : "PZ012"}
];

for(var i = 0;  i<data.length; i++){
var temp = {id : data[i].menuId, code : data[i].percode};
array.push(temp)
}

console.log("新的json数组:"+JSON.stringify(array));

应用：

 JS通过AJAX从后端获取到一个JSon格式的数据：

flask后端的逻辑代码：

@asset.route('/echarts/test1/', methods=['GET', 'POST'])
def echarts_test1():
datas = {
"data": [
{"name": "allpe", "num": 100},
{"name": "peach", "num": 123},
{"name": "Pear", "num": 234},
{"name": "avocado", "num": 20},
{"name": "cantaloupe", "num": 1},
{"name": "Banana", "num": 77},
{"name": "Grape", "num": 43},
{"name": "apricot", "num": 0}
]
}
content = json.dumps(datas)
resp = Response_headers(content)
return resp

前端的逻辑代码：

即后端提供一个如下JSon格式的数据：

"data": [
{"name": "allpe", "num": 100},
{"name": "peach", "num": 123},
{"name": "Pear", "num": 234},
{"name": "avocado", "num": 20},
{"name": "cantaloupe", "num": 1},
{"name": "Banana", "num": 77},
{"name": "Grape", "num": 43},
{"name": "apricot", "num": 0}
]

前端进行需求一的解析：

var names=[];    //名称数组（实际用来盛放X轴坐标值）
var nums=[];    //数量数组（实际用来盛放Y坐标值）
$.ajax({
type : "get",
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "http://127.0.0.1:5000/asset/echarts/test1/",    //请求地址
//       data : {},
dataType : "json",        //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
//              alert(result["data"]);
for(var i=0;i<result["data"].length;i++){
//                      alert(result["data"][i]["name"]);
names.push(result["data"][i]["name"]);    //挨个取出名称并填入类别数组
alert(names.pop());// 出栈以后数据就没了
}
for(var i=0;i<result["data"].length;i++){
//                      alert(result["data"][i]["num"]);
nums.push(result["data"][i]["num"]);    //挨个取出数量并填入销量数组
alert(nums.pop()); // 出栈以后数据就没了
}
}
},
error : function(errorMsg) {
//请求失败时执行该函数
alert("请求数据失败!");
}
})

前端进行需求二的解析：

var array = [];
$.ajax({
type : "get",
//       async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "http://127.0.0.1:5000/asset/echarts/test2/",    //请求发送到Servlet处
dataType : "json",        //返回数据形式为json
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
if (result) {
//              alert(result["data"]);
for(var i = 0;i<result["data"].length;i++){
var temp = {name : result["data"][i]["name"], value : result["data"][i]["value"]};
array.push(temp);
}
console.log("新的json数组:"+JSON.stringify(array));
}

},
error : function(errorMsg) {
//请求失败时执行该函数
alert("请求数据失败!");
}
})