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

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

http://s13.postimage.org/68w2zfmh3/data_BB.png

我想列出这个数据循环，直到服务器上的所有数据都被采用。我如何得到我想要的结果？

Answer 1

提取问题中提供的网址，您的数据如下所示：

"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.
}

如何使用循环创建元素

1 个答案: