how can i load json in jquery load 5 and if i scroll down it will be load again

[Elliot Vash]

HI I’m new here and I’m noob i would like to ask how can i load json in jquery load 5 and if i scroll down it will be load again

here is my code in juquery

<script>
// The Google Geocoding API url used to get the JSON data
var geocodingAPI = "https://xx/api/json/en/";

$.getJSON(geocodingAPI, function (json) {
  var address = json.total_results;
  console.log('Address : ', address);

  for(count = 0; count < address; count++){
      var l = json.results[count].url;

              console.log('Address : ', l);


            }
    // Set the variables from the results array


  var latitude = json.results[0].listing.json_object.field_17;
    console.log('Latitude : ', latitude);

  //  var longitude = json.results[0].geometry.location.lng;
    console.log('Longitude : ', longitude);

    // Set the table td text
    $('#address').text(address);
    $('#latitude').text(latitude);
    $('#longitude').text(longitude);
});

// Caching the link jquery object
var $myLink = $('a.myLink');

// Set the links properties
$myLink.prop({
    href: geocodingAPI,
    title: 'Click on this link to open in a new window.'
}).click(function (e) {
    e.preventDefault();
    window.open(this.href, '_blank');
});
</script>

Thank you

[Fran Diox]

@Elliot-Vash Hi! You can use page’s onInfiniteScroll for that. There are other examples in the forum, like this one. Of course, you need to run your AJAX call to fetch new data instead of the setTimeout in that example.

[Elliot Vash]

Thank you for that information i will do what you suggest if i have any concern i will buzz you up heheheh :) God bLess

[Elliot Vash]

@Fran-Diox hi how can a call a ajx getson on setimeout do i need to create a function and replace setimeout on script thank you so much for your kindness

[Fran Diox]

@Elliot-Vash You can do whatever you need to get your data, just remember to run done() (provided in onInfiniteScroll function) after everything has finished. $.getJSON(..., function(json) { storeMyJson(); done(); })

[Elliot Vash]

@Fran-Diox here is my code `

 document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#load-more-page')) {
    var listNode = page.querySelector('#list-node');
    var createListItem = function (i) {
      return ons.createElement(`<ons-list-item id="info">${i}</ons-list-item>`);
    };
    for (let i = 0; i < 30; i++) {
      listNode.appendChild(createListItem(i));
    }

    page.onInfiniteScroll = function(done) {


          $.getJSON('https://wagi.ph/api/json/en/', function (data) {
              var address = data.total_results;
            console.log("dsdsds",address);

          });

        done();

    };
  }
});

no data will show on my code can you help me

tahnk you so much

[Fran Diox]

@Elliot-Vash You are not doing anything with your data, you need to create visual components based on that new data. Also, the done() must be called when the asynchronous job is finished, not synchronously.

I’m going to give you some pseudo code based on your input, you will need to complete it.

    page.onInfiniteScroll = function(done) {


          $.getJSON('https://wagi.ph/api/json/en/', function (data) {
              var address = data.total_results;
 
              // for each item in address
              //   create ons-list-item
              //   append ons-list-item to ons-list

              done();  // This must be called after the async job is done (inside the AJAX call)
          });
    };

[Elliot Vash]

@Fran-Diox

Thank you for your kindness here is my code but i wonder the first 30 ons-list item was blank and if i down i got 30 result and loop to 30 my total results is 212 each but i a scrool down the results will be 30 and loop on same 30 result

<script>


  document.addEventListener('init', function(event) {
  var page = event.target;
  if (page.matches('#load-more-page')) {
    var listNode = page.querySelector('#list-node');
    var createListItem = function (i) {
      return ons.createElement(`<ons-list-item id="info"></ons-list-item>`);
    };
    for (let i = 0; i < 30; i++) {
      listNode.appendChild(createListItem(i));
    }

    page.onInfiniteScroll = function(done) {
      $.getJSON('https://wagi.ph/api/json/en/', function (data) {
              var total_results = data.total_results;

              var createListItem = function (i) {
                return ons.createElement(`<ons-list-item id="info">${url}</ons-list-item>`);
              };
              for (let i = 0; i < total_results; i++) {
                 var url = data.results[i].url;
                listNode.appendChild(createListItem(i));
                done();

              }


});
    };
  }
});
  </script>

thankyou best regards