First of all: I do not want to use jQuery.
I would like to find a way to parse this type of json and add it text into the special tag:
{
"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"
}
]
}
}
On a HTML I have special tag:
<mytag id="hotel_name"></mytag>
Must become:
<mytag id="hotel_name">My Hotel name</mytag>
I tried this:
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();
But it do not work like I wanted.
Do you have any cue ?
Thanks.
I think you mean:
elements.datas.General.forEach(function (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.text;
});
You have to resolve each JSON property before you can loop the array.
Try this:
<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>
You need to access each property of the objects
elements.datas.General.forEach(function (element) {
var div = document.getElementById(element.id);
div.innerHTML = element.value;
});
Working demo :
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>
same demo on jsfiddle: http://jsfiddle.net/wzu29pau/
Edit, Updated
Note, text
not appear as property of object within datas.General
, datas.Photos
arrays ; see element.text
. Properties appear named id
, value
; ieg, element.id
, element.value
.
To filter single property name, try
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/
To filter multiple property names, try
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;
}
})
});
}
};
poipoi. If you don't have a problems about getting JSON data, I think that It seems work for you.
var obj = JSON.parse(request.responstext);
console.log(obj.datas.General[0].id);
console.log(obj.datas.Photos[1].id);
JSON data type is similar to Array. And you should know about JSON.stringify() and JSON.parse() method.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.