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

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

我收到了 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", 使用正则表达式!

你可以这样写:

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

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

});

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

  • 创建 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)