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("请求数据失败!");
             }
        })