如何遍歷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？

回答

相關問題