1. 程式人生 > >JavaScript文字轉換為JSON物件

JavaScript文字轉換為JSON物件

  • 如果要將一個字串轉換為JSON的物件,那麼可以使用eval()函式
  • 定義文字屬性資料的輸出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript_json</title>
    <script type="text/javascript">
      var data = "{\"name\":\"Maoshu\",\"age\":22,\"sex\":\"男\", "
+ " \"skill\":[\"java\",\"css\",\"html\",\"JavaScript\"], " +" \"depts\":[{\"deptno\":11,\"dname\":\"Accounting\",\"loc\":\"中國\"}, " +" {\"deptno\":22,\"dname\":\"Maneager\",\"loc\":\"上海\"}]} "; var jsonObj = eval("("+data+")"); alert(jsonObj.name)
; </script> </head> <body> </body> </html>
  • 輸出結果

z
在這裡插入圖片描述

  • 如果確實需要通過全部內容的輸出操作,那麼可以使用foreach語法
  • 示例:使用foreach()輸出json
  • JavaScript的foreach語法為
for(var 變數 in 物件){
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>Javascript_json</title> <script type="text/javascript"> window.onload = function () { var data = "{\"name\":\"Maoshu\",\"age\":22,\"sex\":\"男\", " + " \"skill\":[\"java\",\"css\",\"html\",\"JavaScript\"], " +" \"depts\":[{\"deptno\":11,\"dname\":\"Accounting\",\"loc\":\"中國\"}, " +" {\"deptno\":22,\"dname\":\"Maneager\",\"loc\":\"上海\"}]} "; var jsonObj = eval("("+data+")"); var infoEle = document.getElementById("info"); for(var str in jsonObj){ var pele = document.createElement("p"); pele.appendChild(document.createTextNode("key="+str+",value="+jsonObj[str])); infoEle.append(pele); } }; </script> </head> <body> <div id="info"></div> </body> </html>
  • 輸出的結果為:

在這裡插入圖片描述

  • 但是發現基本的資料型別可以直接去的資料內容,而如果是一個數組則會輸出為Object.
  • 使用以下的語句來檢視變數為那種資料型別
typeof 物件
            for(var str in jsonObj){
                var pele = document.createElement("p");
                infoEle.innerHTML += "<p>"+typeof jsonObj[str]+"</p>";
            }
  • 輸出的結果

在這裡插入圖片描述

  • 修改程式碼
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Javascript_json</title>
    <script type="text/javascript">
        window.onload = function () {
            var data = "{\"name\":\"Maoshu\",\"age\":22,\"sex\":\"男\", "
                + " \"skill\":[\"java\",\"css\",\"html\",\"JavaScript\"], "
                + " \"depts\":[{\"deptno\":11,\"dname\":\"Accounting\",\"loc\":\"中國\"}, "
                + " {\"deptno\":22,\"dname\":\"Maneager\",\"loc\":\"上海\"}]} ";
            //解析為json物件
            var jsonObj = eval("(" + data + ")");
            var infoEle = document.getElementById("info");

            //取出json物件中的每一個關鍵字
            for(var key in jsonObj){
                //取出每一個value
                var value = jsonObj[key];
                if(typeof value != "object"){
                    infoEle.innerHTML += "<p>"+key+":"+value+"</p>";
                    //判斷是否為一個數組
                }else if (value.constructor == Array) {
                    //拼接陣列中的內容
                    var arraystr = "";
                    for (var x = 0; x < value.length; x++) {
                        //取出陣列中的內容
                        var arrayValue = value[x];
                        //判斷陣列中是否還有物件
                        if(typeof arrayValue == "object"){
                            //得到物件中的每一個key
                            for(var arraykey in arrayValue){
                                arraystr += arraykey+":"+arrayValue[arraykey]+",";
                            }
                        }else {
                            arraystr += value[x] + ",";
                        }
                    }
                    infoEle.innerHTML += "<p>"+key+":"+arraystr+"</p>";

                }

            }


        }
    </script>
</head>
<body>
    <div id="info"></div>
</body>
</html>
  • 執行結果

在這裡插入圖片描述