How to convert my while loop table list to lazy-repeat?

[AspiringWizard]

Hi there,

I’m in a dilemma here, my huge list is taking too long to load and it is eating way too much memory, so I’m wondering how I can convert it to use ons-lazy-repeat instead.

$("#myDiv").append(
`<table>`
);

while (i < jsonData.length) {
  if (category == "A") {
    $("#myDiv").append(
      `<tr>
          <td>${jsonData[i].name}</td>
        </tr>
        <tr>
          <td>${jsonData[i].phone}</td>
        </tr>
        <tr>
          <td>${jsonData[i].email}</td>
        </tr>`
    );
  }
  i += 1;
}

$("#myDiv").append(
`</table>`
);

I tried using lazy-repeat but I have no idea how I can customize it to show only the ones with the category “A” like in the while loop. Also is there any way I could implement sorting based on the id number, ascending or descending… any advice would be awesome

[munsterlander]

@AspiringWizard First off, is there anyway to just send Category A in the JSON data? The first step to optimization is just retrieve what you need. If you can’t do that, where is category coming from because in your example, it should error out as undeclared. Lastly, how big of a dataset are we doing and an you modify the JSON stream to allow pagination or such?

[AspiringWizard]

My bad Category A was obtained from JSON data which I missed out in the example. There are around 550 data that my while loop is going through and it takes over a minute to display the data. I can’t modify the JSON stream as it is provided to me, and it’s stored in HTML5 web storage so that it can be retrieved without internet connection

$("#myDiv").append(
`<table>`
);

while (i <JSON.parse(localStorage.getItem(`jsonData`)).jsonData[i] .length) {

const category = JSON.parse(localStorage.getItem(`jsonData`)).jsonData[i].category;

  if (category == "A") {
    $("#myDiv").append(
      `<tr>
          <td>${JSON.parse(localStorage.getItem(`jsonData`)).jsonData[i].name}</td>
        </tr>
        <tr>
          <td>${JSON.parse(localStorage.getItem(`jsonData`)).jsonData[i].phone}</td>
        </tr>
        <tr>
          <td>${JSON.parse(localStorage.getItem(`jsonData`)).jsonData[i].email}</td>
        </tr>`
    );
  }
  i += 1;
}

$("#myDiv").append(
`</table>`
);

[munsterlander]

@AspiringWizard Well all you can do really, is break it up into chunks. Instead of looping through everything, just do 50 at a time. When the user scrolls to the bottom, increment i by 50 and grab the next set. Also, category should be var as it is changing instead of const.

[Fran Diox]

@AspiringWizard Can’t you just create an extra array with the data you need?

allDataArray
  .filter(item => item.category === selectedCategory)
  .sort((itemA, itemB) => itemA.value - itemB.value);

Set this array to your lazy-repeat delegate and call refresh method everytime you change it.

Otherwise, as @munsterlander says, you can simply show the first chunk and gradually load more items when the user reach the bottom. Perhaps page’s onInfiniteScroll can help.

[munsterlander]

@Fran-Diox +1 on the array. With Monaca, could you execute a preload during the splash screen to start loading that data into the array? I went with the chunk option because he said it was eating memory, so I figured he is loading more than just the text shown. Either way, optimize!

[AspiringWizard]

@Fran-Diox I did went with onInfiniteScroll option but because I had to sort my table after based on distance, gradual loading just wouldn’t get an accurate sort when the data isn’t all loaded.

@munsterlander Just what I had in mind, I had first time users preload the data during app startup and saved them into web storage, then appended them into the page with jQuery .html(). No more load time!