Virtual list with remote request

Questions
1

Hello
Is possible to have full example virtual list with remote request JSON data
Thanks in advance!

2

Well, this is how I do it:

I like to keep my “data code” in functions separate from the page code. In this case, the function dbGetPeople() returns the data of people in JSON format. In my case, I pull it from a LokiJS database, but you can as well pull it remotely using an ajax request.

function dbGetPeople()
{
// This data is retrieved from a LokiJS database, but you can use
// an ajax request to a remote server
var peopleList = [];
var col = db.getCollection("people");
var data = coll.chain().find().data();

// then use the retrieved json data to prepare variables for the virtual list
// variables title and subtitle get the values of name and desc
for (var i = 0; i < data.length; i++) {
  	var name = data[i].full_name;
  	var desc = data[i].person_description;
    var id = data[i].person_id;
  	peopleList.push({
    	title: name,
    	subtitle: desc,
        personid: id
  	});
   }
return peopleList;
}

The returned value (json data) is then declared in the items variable in the data part of the page so we can use it in the rest of the component.

return {
data: function() {
  var items = dbGetPeople();

  return {
    items: items
  };
},

on: {
  pageBeforeRemove: function () {
    var self = this;
    //self.virtualList.destroy();
  },
  pageAfterIn: function() {
    var self = this;
    var app = self.$app;
    var $ = this.$;

    self.virtualList = self.$app.virtualList.create({
        // List Element
        el: self.$el.find('.virtual-list'),
        // Pass array with items
        items: self.items,
        // Custom search function for searchbar
        searchAll: function (query, items) {
          var found = [];
          for (var i = 0; i < items.length; i++) {
            if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
            if (items[i].subtitle.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
          }
          return found; //return array with mathced indexes
        },
        // List item Template7 template
        itemTemplate:
          '<li>' +
            '<a href="/person/{{personid}}/" class="item-link item-content">' +
              '<div class="item-inner">' +
                '<div class="item-title-row">' +
                  '<div class="item-title">{{title}}</div>' +
                '</div>' +
                '<div class="item-subtitle">{{subtitle}}</div>' +
              '</div>' +
            '</a>' +
          '</li>',

        // Item height
        height: self.$theme.ios ? 63 : (self.$theme.md ? 73 : 46),
      });
   }
 }
}

Not how the variables title, subtitle and personid which were defined in the function are used in the virtualList. personid variable is parsed in the url to the detail page of each person.

1 Like
3

@tsalira thanks for code and support!
Just some little questions

  1. is possible to work with div instead ul/li?
  2. dbGetPeople() return entire list of elements? No append needed?
  3. pageAfterIn bettere of pageInit?
  4. is possible to integrate image lazy load ?
4

  1. I have never tried to replace the ul/li with divs. The virtualList component was designed with ul/li, so I have had no reason to change it.

  2. It returns an array of json objects. Each object represents a person. No append is needed. The appending is done by the component when your parse the items object

  3. The page is initiated once, when it comes into view. I prefer to have the virtualList populated/refreshed with the latest data every time the page comes into view, not only after initialization and that is why I choose to put it in pageAfterIn. Since am getting my data from LokiJS, which is a very fast in-memory database, I do not experience any delays in fetching data as it might be if I was fetching from a remote server. But you can very well shift that code into pageInit.

  4. I have never tried image lazy load, but I think it should be very possible.

1 Like