在沒有jQuery的情況下解析json並在HTML代碼中添加值
[英]Parse a json without jQuery and add the value in HTML code
問題描述
首先：我不想使用jQuery。
我想找到一種解析此類json並將其文本添加到特殊標記中的方法：
{
"datas": {
"General": [
{
"id": "hotel_name",
"value": "My Hotel name"
},
{
"id": "hotel_description",
"value": "Lorem ipsum dolor..."
}
],
"Photos": [
{
"id": "photo1",
"value": "house.png"
},
{
"id": "photo2",
"value": "house.png"
}
]
}
}
在HTML上，我有一個特殊標記：
<mytag id="hotel_name"></mytag>
必須成為：
<mytag id="hotel_name">My Hotel name</mytag>
我嘗試了這個：
function createElements(elements) {
elements = JSON.parse(elements);
elements.forEach(funciton (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.text;
});
}
var request = new XMLHttpRequest();
request.onload = createElements;
request.open("get", "datas.json", true);
request.send();
但這並不像我想要的那樣工作。
你有提示嗎？
謝謝。
5 個解決方案
解決方案1
1 2015-03-05 16:55:26
我想你的意思是：
elements.datas.General.forEach(function (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.text;
});
您必須先解析每個JSON屬性，然后才能循環數組。
解決方案2
0 2015-03-05 17:16:04
嘗試這個：
<body>
<mytag id="hotel_name"></mytag>
<script>
var xhr = null;
var myDiv = document.getElementById("hotel_name");
function load() {
xhr = new XMLHttpRequest();
if (xhr != null) {
xhr.addEventListener("readystatechange", callback, false);
xhr.open("get", "datas.json", true);
xhr.send();
} else {
alert("not support ajax!!");
}
}
function callback() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var data = JSON.parse(xhr.responseText);
myDiv.innerHTML = data.datas.General[0].value;
} else {
myDiv.innerHTML = "<h2>" + xhr.status + ": " + xhr.statusText + "</h2>";
}
}
}
load()
</script>
</body>
解決方案3
0 2015-03-05 17:19:07
您需要訪問對象的每個屬性
elements.datas.General.forEach(function (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.value;
});
工作演示：
var myJSONtext = " {\\"datas\\": { \\"General\\": [ { \\"id\\": \\"hotel_name\\", \\"value\\": \\"My Hotel name\\" }, { \\"id\\": \\"hotel_description\\", \\"value\\": \\"Lorem ipsum dolor...\\" } ], \\"Photos\\": [ { \\"id\\": \\"photo1\\", \\"value\\": \\"house.png\\" }, { \\"id\\": \\"photo2\\", \\"value\\": \\"house.png\\" } ] }}"; var elements = JSON.parse(" {\\"datas\\": { \\"General\\": [ { \\"id\\": \\"hotel_name\\", \\"value\\": \\"My Hotel name\\" }, { \\"id\\": \\"hotel_description\\", \\"value\\": \\"Lorem ipsum dolor...\\" } ], \\"Photos\\": [ { \\"id\\": \\"photo1\\", \\"value\\": \\"house.png\\" }, { \\"id\\": \\"photo2\\", \\"value\\": \\"house.png\\" } ] }}"); elements.datas.General.forEach(function (element) { var div = document.getElementById(element.id); div.innerHTML = element.value; });
<div id="hotel_name"></div>
jsfiddle上的相同演示： http : //jsfiddle.net/wzu29pau/
解決方案4
0 已采納 2015-03-05 17:23:00
編輯，更新
注意， text不會在datas.General ， datas.Photos數組內顯示為對象的屬性。 參見element.text 。 屬性出現名為id ， value ; IEG， element.id ， element.value 。
要過濾單個屬性名稱，請嘗試
function createElements(elements) {
if (elements.target.readyState === 4) {
var elems = elements.target.response;
var keys = Object.keys(elems.datas).filter(function(name) {
return name === "General"
});
keys.forEach(function (element, i) {
var el = elems.datas[element];
el.forEach(function(key, i) {
var div = document.getElementById(key.id);
div.innerHTML = key.value;
})
});
}
};
var request = new XMLHttpRequest();
request.onload = createElements;
request.responseType = "json";
request.open("GET", "datas.json", true);
request.send();
jsfiddle http://jsfiddle.net/k2f7b3mp/
要過濾多個屬性名稱，請嘗試
function createElements(elements) {
if (elements.target.readyState === 4) {
var elems = elements.target.response;
var keys = Object.keys(elems.datas).filter(function(name) {
return name === "General" || name === "Color"
});
console.log(keys, 1)
keys.forEach(function (element, i) {
var el = elems.datas[element];
el.forEach(function(key, i) {
console.log(key, i);
if (document.getElementById(key.id)) {
var div = document.getElementById(key.id);
div.innerHTML = key.value;
}
})
});
}
};
解決方案5
0 2015-03-05 17:23:34
poipoi。 如果您在獲取JSON數據方面沒有任何問題，那么我認為這似乎對您有用。
var obj = JSON.parse(request.responstext);
console.log(obj.datas.General[0].id);
console.log(obj.datas.Photos[1].id);
JSON數據類型類似於Array。 而且您應該了解JSON.stringify（）和JSON.parse（）方法。
在沒有jQuery的情況下解析JSON
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.