Get next from JSON

[altendorfme]

Hi,

I have a small problem to retrieve the next URL from a JSON, the next does not wait for the end of the Ajax call and cannot receive the next URL.

function nextHandler(pageIndex) {
	var ignoreIds = [];
	var articles = document.querySelectorAll("article.single");
	for (var i = 0; i < articles.length; i++) {
		ignoreIds.push(articles[i].getAttribute("data-postId"));
	}
	
	return fetch('/wp-json/site/next/'+global.postType+'/'+global.category+'/'+ignoreIds.join([',']))
		.then(response => {
			return response.json();
		})
		.then((data) => {
			return data.nextUri;
		}
		);
}
var ias = new InfiniteAjaxScroll('#infinitescroll', {
	item: '.single',
	next: nextHandler,
	pagination: false,
});

[fieg]

Hi @altendorfme, you have to call this.append, from the nextHandler (from the final then call).

return this.append(Array.from(frag.childNodes))
        // indicate that there is a next page to load
        .then(() => hasNextPage);
    });

See this code for how to do this:
https://codesandbox.io/s/github/webcreate/infinite-ajax-scroll/tree/master/examples/json?file=/index.js

Please let me know if this helps.

[altendorfme]

Hi @fieg ,

There are two Ajax calls, the first is to bring the next URL:

[
  {
    "nextId": 2109671,
    "nextUri": "https://next.com/next-post/"
  }
]

The second call ias would take the information from the URL (nextUri), bringing the content.

I fork code, maybe it's easier in: https://codesandbox.io/s/romantic-cdn-yqurq

[fieg]

This is not a common use pattern for IAS. Why does the next url need to come from a json call? If you could tell me a bit more about your use case I can help you better.

[altendorfme]

Hi, this API route (With ElasticSearch) returns smarter related results.

[fieg]

I think this should do the trick:

function nextHandler(pageIndex) {
  return fetch("./static/post.json")
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let hasNextPage = pageIndex + 1 < data.length;
      let nextUrl = data[pageIndex].nextUri;

      return this.load(nextUrl).then((data) => {
        return this.append(data.items).then(() => {
          return hasNextPage;
        });
      });
    });
}

https://codesandbox.io/s/relaxed-feynman-ofl38?file=/index.js