Adding a recently retrieved data to a current array in JavaScript and Vue.js

Question

Adding a recently retrieved data to a current array in JavaScript and Vue.js

API route is fetching data, and I have implemented pagination to fetch post data.

On page 2 of pagination, I want to append the fetched data to the existing array.

Function utilized for data fetching

const posts = ref([]);
const page = ref(1);

const getPosts = async (page) => {
        await axios
            .get("/api/explore/gallery/?page=" + page)
            .then((response) => {
                if (page === 1) {
                    posts.value = response.data;
                } else {
                    posts.value = { ...posts.value, ...response.data };
                }
            });
    };

From page 2 onwards, the fetched data will be added to the existing array.

Outcome with

posts.value = { ...posts.value, ...response.data };

https://i.sstatic.net/gfZKv.png

The id now starts from 51 instead of 1 - 100.

I also attempted

posts.value = [ ...posts.value, ...response.data ];

but encountered

PostApi.js:12 Uncaught (in promise) TypeError: Invalid attempt to spread non-iterable instance.
In order to be iterable, non-array objects must have a [Symbol.iterator]() method.
    at _nonIterableSpread (PostApi.js:12:39)
    at _toConsumableArray (PostApi.js:10:131)
    at eval (PostApi.js?c0c4:15:21)

response.data has this structure

https://i.sstatic.net/1Ysrh.png

post.value appears like this

https://i.sstatic.net/O6IoD.png

javascript vuejs3

Answer 1

Answer №1

To optimize the amount of data stored on the client side, consider implementing a cache system. A useful LRU cache solution can be found in this answer. Integration with your API could be done as follows...

const cache = new LRU(8);

const getPosts = async (page) => {
    const result = cache.get(page);
    if (result) return Promise.resolve.result;
    return await axios
        .get("/api/explore/gallery/?page=" + page)
        .then((response) => {
            cache.set(page, response.data);
            return response.data;
        });
};

Your webpage should display the current value of posts. The paging action triggered by the user would look something like this...

// inside an async function
this.posts = await getPosts(pageComputedFromUI);

This approach ensures better memory management compared to caching everything indefinitely, though it does involve more frequent network requests.

Answer 2

To optimize the amount of data stored on the client side, consider implementing a cache system. A useful LRU cache solution can be found in this answer. Integration with your API could be done as follows...

const cache = new LRU(8);

const getPosts = async (page) => {
    const result = cache.get(page);
    if (result) return Promise.resolve.result;
    return await axios
        .get("/api/explore/gallery/?page=" + page)
        .then((response) => {
            cache.set(page, response.data);
            return response.data;
        });
};

Your webpage should display the current value of posts. The paging action triggered by the user would look something like this...

// inside an async function
this.posts = await getPosts(pageComputedFromUI);

This approach ensures better memory management compared to caching everything indefinitely, though it does involve more frequent network requests.

Answer 3

Answer №2

After much trial and error, I have finally discovered the solution:

const retrievePosts = async (pageNumber) => {
    await axios
        .get("/api/explore/gallery/?page=" + pageNumber)
        .then((response) => {
            if (pageNumber === 1) {
                posts.value = response.data;
            } else {
                posts.value = {
                    ...posts.value,
                    data: [...posts.value.data, ...response.data.data],
                };
            }
        });
};

Answer 4

After much trial and error, I have finally discovered the solution:

const retrievePosts = async (pageNumber) => {
    await axios
        .get("/api/explore/gallery/?page=" + pageNumber)
        .then((response) => {
            if (pageNumber === 1) {
                posts.value = response.data;
            } else {
                posts.value = {
                    ...posts.value,
                    data: [...posts.value.data, ...response.data.data],
                };
            }
        });
};

Adding a recently retrieved data to a current array in JavaScript and Vue.js

Answer №1

Answer №2

Similar questions

What is the process of adding a div to the left side of the parent element in AngularJS

Observing the closing of a modal window from a different controller in AngularJS

Flickering issue with Chart.js chart persists upon reopening the page

Receive the most recent query in a Nuxt plugin following the completion of page loading

Decoding JSON data with JavaScript

What is the process for generating a GET request for selected checkboxes and subsequently showcasing the data on an HTML webpage?

Issue: Utilized more hooks than in the previous render cycle

Delete the span element if the password requirements are satisfied

Dropdown selection returning the text value instead of the designated value

The error "ReferenceError: process is not defined in vue 3" is being

Tips for retaining the scroll position of a particular page after a postback

Is FIREFOX better with plugins or extensions?

Tips on invoking a scope function depending on an attribute's value

The attempt to update several partial views using Jquery, MVC, and Json is currently malfunctioning

Trigger Javascript on 'Nearby' input from Html form

The webkitTransitionEnd event fires prior to a repaint or reflow occurring

I'm facing an issue where there is no "Access-Control-Allow-Origin" header present. Looking for assistance in converting it to JSONP using the POST method. Can anyone provide guidance?

The perpetual loop in React context triggered by a setState function within a useEffect block

Use Javascript to display an image based on the date, otherwise hide the div

What is the best way to implement a dynamic sidebar component using React and Material UI?