Question

我收到了JSON帖子回复，如下所示。我想迭代JSON后响应数据并在图像div中打印数据（如图所示）。

有没有人能告诉我如何使用JavaScript完成这项工作？感谢

接收JSON帖子回复的Javascript代码：

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

}

收到请求后的回复：

"[\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键值更改为＆＃34; itemtext＆＃ 34;：＆＃34;空＆＃34;，使用正则表达式！

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字符串并将其设置为innerHTML
使用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中？

3 个答案: