JavaScript文字轉換為JSON物件
阿新 • • 發佈:2019-01-13
- 如果要將一個字串轉換為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>
- 執行結果