如何循环createElement

Question

当数据显示到div标记时，我希望执行循环操作，如下所示：

function GetDataFromServer() {

var url = "http://bertho.web.id/curl/services21/DataReadNP.php";
JSONP.get(url, {}, function(response){
    var listItem, container, dataList = document.getElementById("dataList"), str = "", str2 = "";
            for ( var i = 0; i < response.length; ++i ) {
                str += response[i].title;
                str2 += response[i].fetch_date;
            }

    listItem = document.createElement('div');
    listItem.setAttribute('data-bb-type', 'item');
    listItem.setAttribute('data-bb-img', 'images/icons/icon11.png');
    listItem.setAttribute('data-bb-title', str);
    listItem.innerHTML = str2;

    container = document.createElement('div');
    container.appendChild(listItem);

    bb.imageList.apply([container]);

    dataList.appendChild(container.firstChild);

    if (bb.scroller) {
        bb.scroller.refresh();
    }

});  

}

要将列表显示到屏幕上，请执行以下操作：

function dataOnTheFly() {
   document.getElementById('waiting').style.display = 'none';
   GetDataFromServer()  
}

我想要的数据显示在屏幕上，但不符合我想要的。请看以下图片：

BB.png

我想列出这个数据循环，直到服务器上的所有数据都被获取为止。我怎样才能得到我想要的结果？

Answer 1

提取问题中的URL，您的数据如下所示：

"items": [
 {
  "id": "30",
  "judul": "KATY PERRY: PART OF ME",
  "img": "http:\/\/bertho.web.id\/curl\/21proses\/images\/r_134760931680781_100x147.jpg",
  "desk": "Sebuah dokumentasi tentang kehidupan Katy Perry diatas maupun diluar panggung. [More]",
  "web": "http:\/\/www.21cineplex.com\/",
  "fetch_date": "15-09-2012 20:10:23"
 }, 

这是一个JSON响应，而不是JSONP --它们是相似的，但是不同。我不知道您的JSONP函数是做什么的，所以我不能确切地告诉您如何继续。

在某种程度上，您需要对收到的数据运行JSON.parse()。你的图书馆可能也可能不会为你这样做。如果是typeof response === "string"的话，那就没有了。

一旦您将JSON解码成一个对象，那么这只是一个简单的循环问题。

var items = response.items;
var l = items.length;
var i = 0;
var item;

for (i = 0; i < l; i++) {
  item = items[i];
  // Now you can do something with item
   listItem = document.createElement('div');
   listItem.setAttribute('data-bb-type', 'item');
   listItem.setAttribute('data-bb-img', item.img);
   listItem.setAttribute('data-bb-title', item.judul);
   // Don't forget to append listItem somewhere.
}