CODEWITHSUNDEEP
javascriptjqueryhtml
Bertho Joris
Bertho Joris

Reputation: 1601

How to createElement with looping

Help, i want to do looping when the data is displayed to the div tag as the following code :

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

});  

}

To display the list to the screen :

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

The data I want is displayed on the screen, but do not fit what I wanted. Please see pictures below :

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

I want to list this data looping until all the data on the server is taken. How do I to get the results I want?

Upvotes: 0

Views: 564

Answers (1)

Jeremy J Starcher
Jeremy J Starcher

Reputation: 23863

Pulling up the URL given in your question, your data looks like this:

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

This is a JSON response, not a JSONP -- they are similar, but different. I'm not sure what your JSONP function does, so I can't tell you exactly how to proceed.

At some point, you need to run JSON.parse() on the data you receive. Your library may nor may not do this for you. If typeof response === "string" then it hasn't.

Once you have the JSON decoded to an object, then it is just a simple matter of looping

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

Upvotes: 1

Related Questions