Utilizing JavaScript and Ajax to Fetch the Following Page of Tumblr Entries

Question

Utilizing JavaScript and Ajax to Fetch the Following Page of Tumblr Entries

Working on a React project that involves scraping my Tumlbr blog for photo posts to display on a 'blog' page. Since the tumblr.js package doesn't support in-browser calls and my backend is in Rails, I'm utilizing ajax to accomplish this task. Below is the code snippet I used to fetch the first 20 posts from page 1 of my tumblr:

export const getPosts = () => {
  return (dispatch) => {
    $.ajax({
      url:"https://api.tumblr.com/v2/blog/somewhatadrift.tumblr.com/posts/photo?...&api_key=...",
      type: "GET",
      context: this,
      success: function(result) {
        let posts = result.response.posts.filter(post => post.type === 'photo');
        dispatch(setPosts(posts));
      }
    });
  }
}

The output of this call can be viewed here.

In the Tumlbr API documentation, it mentions that total_posts represents "The total number of posts available for this request, useful for paginating through results," but does not provide a clear example on how to implement pagination.

javascript ajax pagination tumblr

Answer 1

Answer №1

Sure, I'll do my best to provide an answer.

Here is a rough outline of what you need.

const fetchPosts = () => {
    let limit = 20; // feel free to adjust this value up to 50
    const fetchData = function (offset) {
        $.ajax({
            url: `https://api.tumblr.com/v2/blog/somewhatadrift.tumblr.com/posts?limit=${limit}&offset=${offset}`,
            success(result) {
                let i = 0;
                const totalPosts = result.response.total_posts;
                const postLength = result.response.posts.length;
                while (i < postLength) {
                    // your logic here
                    dispatch(setPosts(posts)); // unsure if this triggers re-render in React
                    i++;
                }
                if (totalPosts >= offset && postLength !== 0) {
                    fetchData(offset + limit);
                }
            }
        });
    };
    fetchData(0);
};

Let's break it down further.

let limit = 20

You can set the limit to any value up to 50. Technically, setting it to 20 is sufficient without including it in the URL.

url: `https://api.tumblr.com/v2/blog/somewhatadrift.tumblr.com/posts?limit=${limit}&offset=${offset}`,

We use template literals for dynamic parameter insertion during each loop iteration.

A counter is established with variable i.

The posts are extracted while i is less than postLength, followed by incrementing i with i++.

If the total post count is equal to or greater than the offset, additional posts exist for retrieval, and the function repeats with an incremented counter: fetchData(offset + limit);

Initially, we call fetchData(0); subsequent runs increment the counter until reaching the condition that verifies total posts against offset plus limit, signaling the end of data retrieval.

UPDATE

For each loop iteration, consider logging offset, i, and other variables to observe looping behavior.

I hope this explanation aids your understanding.

Answer 2

Sure, I'll do my best to provide an answer.

Here is a rough outline of what you need.

const fetchPosts = () => {
    let limit = 20; // feel free to adjust this value up to 50
    const fetchData = function (offset) {
        $.ajax({
            url: `https://api.tumblr.com/v2/blog/somewhatadrift.tumblr.com/posts?limit=${limit}&offset=${offset}`,
            success(result) {
                let i = 0;
                const totalPosts = result.response.total_posts;
                const postLength = result.response.posts.length;
                while (i < postLength) {
                    // your logic here
                    dispatch(setPosts(posts)); // unsure if this triggers re-render in React
                    i++;
                }
                if (totalPosts >= offset && postLength !== 0) {
                    fetchData(offset + limit);
                }
            }
        });
    };
    fetchData(0);
};

Let's break it down further.

let limit = 20

You can set the limit to any value up to 50. Technically, setting it to 20 is sufficient without including it in the URL.

url: `https://api.tumblr.com/v2/blog/somewhatadrift.tumblr.com/posts?limit=${limit}&offset=${offset}`,

We use template literals for dynamic parameter insertion during each loop iteration.

A counter is established with variable i.

The posts are extracted while i is less than postLength, followed by incrementing i with i++.

If the total post count is equal to or greater than the offset, additional posts exist for retrieval, and the function repeats with an incremented counter: fetchData(offset + limit);

Initially, we call fetchData(0); subsequent runs increment the counter until reaching the condition that verifies total posts against offset plus limit, signaling the end of data retrieval.

UPDATE

For each loop iteration, consider logging offset, i, and other variables to observe looping behavior.

I hope this explanation aids your understanding.

Utilizing JavaScript and Ajax to Fetch the Following Page of Tumblr Entries

Answer №1

Similar questions

Choosing specific anchors based on their corresponding div ids

Is it necessary to have both index.js and Component.js files for a single component in React?

Show all <p> lines in a .txt file in a horizontal format instead of vertical using javascript and jquery

No information returned when making an ajax request to a controller action in MVC

Crack open a JSON object

Is there a way to prevent the Alt+F4 function from closing tabs in the Internet Explorer browser

Tips for swapping text with an image or icon during mobile scaling

Minimize or conceal iframe

Perform ng-repeat on an array containing several other arrays

Combining objects in JavaScript

How can I most effectively establish defaultValues for react-hook-form in this scenario?

Retrieve the HTML content from a WebView

Is there a way to showcase individual components on a single surface one at a time?

The jQuery UI Dialog refuses to close

Quickest technique to verify a specific telephone number format

Just starting out with callback functions (using a callback as an argument)(Javascript)

Stop the form from submitting when the enter key is pressed using VueJS and Semantic UI

Exploring and adding elements in a sophisticated array or object through recursive searching

What is the best way to populate missing days in an array up to the current date that do not already contain the "Present" element?

Utilizing a mustache template to display an image stored in a MongoDB database