如何循环 JSON post 响应并将其数据打印到图像 div 中？

Question

我收到了 JSON post 回复，如下所示。我想遍历 JSON post 响应数据并在图像 div 中打印数据（如图所示）。

谁能告诉我如何使用 JavaScript 完成此操作？谢谢

Javascript 代码接收 JSON post 响应：

cordovaHTTP.post(url,data,
  function(response) {
alert("Data: " + response.data + "\nStatus: " + response.status);

}

post 收到请求响应：

"[\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]"

我要打印的图像 div :

<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>

编辑： 我接受下面的答案，我必须使用一些替换函数来验证我的实际 api 数据，方法是删除所有 \r\n 并更改所有itemText 键值 "itemtext": "empty", 使用正则表达式!

Answer 1

你可以这样写：

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);
    }
});

Answer 2

IMO，使用 concatenate += 字符串而不是每次都将 HTML 附加到循环中的主体。

除了@Taha Paksu 的回答。

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);

});

Answer 3

如前所述，有两种创建动态元素的方法

创建 html 字符串并将其设置为内部字符串HTML
使用 document.createElement 创建动态元素并将其附加到容器。

以下是表示创建 HTML 字符串的示例：

注意：有不同的循环方式。您应该根据您的用例选择它们。我使用 array.reduce 作为示例，但您可以使用 for 或任何其他方法获得相同的结果。

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)

如何循环 JSON post 响应并将其数据打印到图像 div 中？

How to loop over JSON post response and print its data into image divs?

javascript

jquery

json

parsing

jsonobject