How to loop over JSON post response and print its data into image divs?
Question
I received JSON post response as shown below . I want to iterate over JSON post response data and print the data in image divs (as shown).
Could any show me how this can be done using JavaScript ? Thanks
Javascript code the receives JSON post response :
cordovaHTTP.post(url,data,
function(response) {
alert("Data: " + response.data + "\nStatus: " + response.status);
}
post request response received:
"[\r\n {\r\n \"itemID\": \"12345678\",\r\n \"itemTitle\": \"mango\",\r\n \"itemText\": \"\",\r\n \"ThumbUrl\": \"http://awebsite.com/pics/1.jpg\",\r\n \"Other\": null\r\n },\r\n {\r\n \"itemID\": \"12345679\",\r\n \"itemTitle\": \"orange\",\r\n \"itemText\": \"\",\r\n \"ThumbUrl\": \"http://awebsite.com/pics/2.jpg\",\r\n \"Other\": null\r\n }\r\n]"
Image divs that i want to print :
<div class ="image">
<a href="javascript:dofunction('./test.php?title=Mango&TargetUrl=http://somesite.com/12345678')">
<img src="http://awebsite.com/pics/1.jpg" alt=".." />
</a>
</div>
<div class ="image">
<a href="javascript:dofunction('./test.php?title=orange&TargetUrl=http://somesite.com/12345679')">
<img src="http://awebsite.com/pics/2.jpg" alt=".." />
</a>
</div>
Edit: I accept the answer below and i had to validate my actual api data using some replace functions by removing all \\r\\n and changing all itemText key values to "itemtext": "empty", using regular expression!
3 answers
solution1
1 ACCPTED 2016-10-02 17:08:28
You can write something like this:
cordovaHTTP.post(url, data, function(response) {
// first, convert the string to JSON data array structure
var json = $.parseJSON(response.data);
// then loop the single items
for(i in json)
{
// create HTML code
var div = "<div class=\"image\">" +
"<a href=\"javascript:dofunction('./test.php?title=" + json[i].itemTitle + "&TargetUrl=http://somesite.com/" + json[i].itemID + "')\">" +
"<img src=\""+ json[i].ThumbUrl +"\" alt=\"..\" />" +
"</a>" +
"</div>";
// append it inside <body> tag.
$("body").append(div);
}
});
solution2
0 2016-10-02 17:26:46
IMO, use concatenate += of string rather than every time append HTML to the body inside a loop.
In addition of @Taha Paksu answer.
cordovaHTTP.post(url, data, function(response) {
// first, convert the string to JSON data array structure
var json = $.parseJSON(response.data);
// then loop the single items
var div = "";
for(i in json)
{
// create HTML code
div += "<div class=\"image\">" +
"<a href=\"javascript:dofunction('./test.php?title=" + json[i].itemTitle + "&TargetUrl=http://somesite.com/" + json[i].itemID + "')\">" +
"<img src=\""+ json[i].ThumbUrl +"\" alt=\"..\" />" +
"</a>" +
"</div>";
}
// append it inside <body> tag once the loop completes
$("body").append(div);
});
solution3
0 2016-10-02 17:27:49
As commented before, there are 2 ways to create dynamic elements
- Create html string and set it as innerHTML
- Create dynamic elements using
document.createElementand append it to container.
Following is a sample representing creation of HTML string:
Note: There are different ways to loop. You should choose them based on your use case. I have use array.reduce for sample but you can achieve same result using for or any other method.
var data = [{ "itemID": "12345678", "itemTitle": "mango", "itemText": "", "ThumbUrl": "http://awebsite.com/pics/1.jpg", "Other": null }, { "itemID": "12345679", "itemTitle": "orange", "itemText": "", "ThumbUrl": "http://awebsite.com/pics/2.jpg", "Other": null }] function createHTML(obj) { var _href = "./test.php?title=" +obj.itemTitle+ "&TargetUrl=http://somesite.com/" + obj.itemID var _html = '<div class ="image">' + '<a href="javascript:dofunction('+_href+')">' + '<img src="' +obj.ThumbUrl+ '" alt=".." />' + '</a>' + '</div>' return _html; } var _html = data.reduce(function(p,c){ return p + createHTML(c) },''); console.log(_html)
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.