Virtual list won't show my JSON-Data

Questions
1

Unfortunately I can’t get this to work. The data should be read from the JSON file and displayed in the virtual list.

What am I doing wrong?

JSON:
{“list”:[
{“abk”: “aaa”,“name”: “This is aaa”},
{“abk”: “bbb”,“name”: “This is bbb”},
{“abk”: “ccc”,“name”: “This is ccc”},
]}

JS:

app.request.json('abk.json')
  .then(function (res) {

  	var items=res.length;
  	var self = this;
  	var items = [];
  	for (var i = 0; i <= data.length-1; i++) {
  		items.push({
  		abk: data[i][1],
  		name: data[i][0]

  		});
  	}
 });





app.virtualList.create({
  el: '.virtual-list',
  height: 44,
  cache:false,
  createUl: true,
  items: items,



  //items: [{"abk": "aaaa","name": "This is aaaa"},{"abk": "bbbbb","name": "This is bbbb"},{"abk": "cccc","name": "This is cccc"}],


renderItem(item) {
  return `
  <li>
    <a href="#" class="item-link item-content">
      <div class="item-inner">
        <div class="item-title-row">
          <div class="item-title">${item.abk}</div>
        </div>
        <div class="item-subtitle">${item.name}</div>
      </div>
    </a>
  </li>`;
},


});

HTML:

Bildschirmfoto 2021-02-09 um 13.59.45
Bildschirmfoto 2021-02-09 um 13.59.451091×625 71.3 KB

2

You two items var maybe you are overwriting.

var items=res.length;
var self = this;
var items = []; --> change this one ir the first.

I can’t test.

3

I tried it but this won’t work.

4

Can anyone help me? I just can’t get any further at this point

5

You make a console.log in the for to see what is happening in there.

6

Can you please give me a simple example from scratch?
That would help me a lot, I can customize it myself.

This is what the example should show:

  • Read JSON file
  • Parse content
  • Display content in virtual list
7

Here is something working for me,. I use the WordPress rest api to get the JSON.

app.request.json('JSON_URL', function (usadosdata) {
    $$(document).on('page:init', '.page[data-name="oportunidades"]', function (e) {
        var usados = usadosdata;
        var objusados = [];
        for (var i = 0; i < usados.length; i++) {
            var tit = usados[i]["title"];
            var desc = usados[i]["acf"];
            ...
            var t = {};
            t.id = i + 1;
            t.titulo = tit["rendered"];
            t.descripcion = desc["descripcion_usados"];
            ...
            objusados.push(t);
        }
        var oportunidadesList = app.virtualList.create({
            // List Element
            el: '.oportunidades_list',
            // Pass array with items
            items: objusados,
            emptyTemplate: 'TEMPLATE_WHEN_IS_EMPTY',
            // Custom search function for searchbar
            searchAll: function (query, items) {
                var found = [];
                for (var i = 0; i < items.length; i++) {
                    if (items[i].titulo.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
                }
                return found; //return array with mathced indexes
            },
            // List item Template7 template
            itemTemplate: 'HERE_GO_THE_THEMPLATE',
            // Item height
            height: 102,
        });
    });
});