如何遍历JSON后期响应并将其数据打印到图像div？

我收到了JSON post响应，如下所示。我想遍历JSON post响应数据并在图像div中打印数据（如图所示）。如何遍历JSON后期响应并将其数据打印到图像div？

任何可以告诉我如何使用JavaScript可以做到这一点？由于

JavaScript代码收到JSON后响应：收到

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

}

POST请求的响应：

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

编辑：我想打印

"[\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：我接受下面的答案，我必须验证我的实际api数据使用一些替换函数，通过删除所有\ r \ n并使用正则表达式将所有itemText键值更改为“itemtext”：“empty”！

来源

2016-10-02 user1788736

很容易做到Knockout.js，我强烈建议你看一看。 – connexo

您可以循环浏览JSON并自行创建HTML。 * Knockout/Angular/React *可以减轻你的工作量，但它们增加了加载时间，每个框架/库都有它自己的优点和缺点。请在使用前引用它们 – Rajesh

感谢您的回复，但我没有使用Knockout/Angular/React进行练习。是否可以使用for循环来做到这一点？ – user1788736

你可以写这样的事情：

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

来源

2016-10-02 17:08:28

只是一个指针，它是一个糟糕的操作来操作循环中的DOM。 – Rajesh

感谢您的回复。 @Taha Paksu我试过你的解决方案，但我没有打印潜水！我的JSON响应与我的初始JSON响应示例的编辑版本不同！如何删除那些反斜杠，数据开始和结尾处的双引号？我应该放置一个名为body的潜水吗？此外，如您所见，我想打印在另外两次潜水中的div！希望你能帮我解决这个问题。 – user1788736

1.我将编辑回复到原始状态。 2.'$ .parseJSON'处理。 –

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

});

来源

2016-10-02 17:26:46

正如之前的评论中，有2种方式来创建动态元素

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

来源

2016-10-02 17:27:49 Rajesh

如何遍历JSON后期响应并将其数据打印到图像div？

回答

相关问题