Remembering data in a lazy loaded AngularJs list

Encountering an issue with a lazy loaded list of books. Initially, 10 books are loaded and if the user scrolls down, the next 10 books are loaded.

For example, if the user is on "page" 4 and clicks on the 35th book to view details, upon returning to the list, only the first 10 books are visible again, requiring all lazy loadings to be redone.

Is there any way to implement caching or storing to prevent this from happening? Thank you for any suggestions!

[UPDATE] Thanks for your replies!

routes

.state('app.books.list',{
    ...
    ...
    resolve: {

        books : function(bookFactoryBook) {
           return booksFactoryBook.getList({page : 1});
        }

    }
})
.state('app.books.details',{

    // just loads detail

})

ctrl (controller as syntax)

function bookControllerList(_books, ....) {

     vm = this;
     vm.books = _books;

     ......

     // lazy loader just appends new data on vm.books
     // after loading was successful

    /**
     * init lazy loader
     *
     * @desc    initialize lazy-loader for books
     * @return  {void}
     * @private
     */
    function _initLazyLoader() {

        if(_isLazyLoadingEnabled() === false) {

            return;

        }

        // configure lazy loader
        var mapper = {
            data            :   'books', // vm.books
            isEnabled       :   'lazyLoadingEnabled',
            indicatorId     :   'lazyLoadingIndicatorId',
            onDataLoaded    :   _afterLazyLoading
        };

        if(booksFactoryLazyLoader.setup(vm, mapper) === false) {

            // failed to initialize lazy loader - disable feature
            vm.lazyLoadingEnabled = false;

        } else {

            vm.lazyLoadingEnabled = true;

        }

    }

    /**
     * after lazy loading
     *
     * @desc    manages data manipulation after lazy loading
     * @param   books       -   {Array} -   new loaded data to manipulate
     * @return  {void}
     * @private
     */
    function _afterLazyLoading(books) {

        // check if user is logged in
        if(authFactorySession.isAuthorized() === true) {

            // try to flag favorites in received books
            books = _addFavoriteFlags(books);

        }

        // append data to vm
        vm.books = vm.books.concat(books);

    }

}

Could it be an issue with the controller as syntax? How can I extend the lifetime of my scope / vm object?

If I change the order of the states and connect them as parent / child (app.books.list and app.books.list.detail), it doesn't make any difference.

Thank you for any insights

Answer №1

It appears that your controller is being reset after you view the book details, causing the list reference to be reinitialized. To solve this issue, consider keeping the controller alive or moving the book list to a scope with a longer lifespan.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Postman seems to be functioning correctly while AXIOS is encountering issues

I've encountered a strange issue with my MERN app. When I use Postman to send a PUT request to my API, it successfully updates both the API and MongoDB. However, when performing the same action on the front-end, the API does not update even though the ...

What is the best way to change a byte array into an image using JavaScript?

I need assistance converting a byte array to an image using Javascript for frontend display. I have saved an image into a MySQL database as a blob, and it was first converted to a byte array before storage. When retrieving all table values using a JSON ar ...

SDK for generating templates with JavaScript/jQuery

I am in the process of developing an SDK in JavaScript/jQuery that can generate templates based on user input, such as profile templates and dialog templates. These templates require data from an AJAX call to be created. User input should include certain ...

Ways to retrieve the mapState property within a method

Is there a way to access the count property within the method while working with vuex? Take a look at my code provided below: Screenshot of Code: https://i.stack.imgur.com/xNUHM.png Error Message [Vue warn]: Computed property "count" was assigned to bu ...

Arrange individuals using AngularJS into an alphabetical directory and apply filtering

Within my AngularJS application, I have an object where keys represent letters of the alphabet and each key contains an array of people. <div ng-repeat="(letter, group) in people"></div> <div ng-repeat="people in letter"></div> ...

Having trouble sending a JSON object from Typescript to a Web API endpoint via POST request

When attempting to pass a JSON Object from a TypeScript POST call to a Web API method, I have encountered an issue. Fiddler indicates that the object has been successfully converted into JSON with the Content-Type set as 'application/JSON'. Howev ...

Can Nuxt's asyncData handle multiple requests with conditional statements?

I've been grappling with this issue for some time now. I understand how Nuxt asyncData can be used to make either one request or multiple requests, but is there a way to incorporate conditional logic for making multiple requests based on a query param ...

Utilize time in submitting a form

Is it possible to schedule a form submission at a specific time, such as 12:00? I have already created a countdown timer and now would like the form to be submitted automatically at a certain time. <html> <head> </head> <body> ...

Mastering the Art of Utilizing AngularJS to Harness the Power of Keypress and

Currently, I am in the process of developing a calculator utilizing AngularJS. The issue arises when clicking on the '923216' buttons triggers the "updateOutput(btn)" function, successfully appending them and updating the view. However, upon addi ...

A step-by-step guide on extracting nested ASP.NET DataGrid values with JavaScript

Looking to retrieve data from a nested data grid on an aspx page using JavaScript. Check out the following code snippet: <tr> <td colspan="2" align="center"> <asp:DataGrid ID="sampleData" AutoGenerateColumns="false" runat="serv ...

ECharts - Version 3.1.6 Event Plugin

I am looking for advice regarding the management of two charts with reference to echars from Baidu (version 3.1.6). Is there a way to control both charts by engaging in a click event on one of them? In simpler terms, how can I capture and respond to the c ...

modifying the state in a stateless React component

Hello everyone! I am here trying to work with hooks and I'm not sure how to achieve my goal. Here is the code I have: import React, { useState } from 'react' import { useForm } from 'react-hook-form' import {useDispatch } from &a ...

There appears to be an issue with displaying the graph

I am having trouble understanding how to transfer the values entered in the input to the graph that is displayed successfully. Although the update seems correct, nothing changes when I try to update it and the data remains stagnant. Page.vue <script&g ...

AngularJS allows for the creation of 2D arrays using the $Index

Currently, I am working on a project using AngularJS that involves creating a spreadsheet from a 2D array generated by the ng-repeat function. As part of this project, I am developing a function to update the initial values of the array when users input ne ...

Having an issue with jQuery where trying to append a remove button to a list results in the

Looking to create a dynamic list where users can easily add new items by clicking a button. As each item is added, a corresponding remove button should also be displayed. The issue I'm facing is that every time a new item is added, an extra close but ...

What are some ways we can enhance Map.get for react-router using ES6 Maps?

I recently implemented a map using new Map() to store my RR4 configuration within my application. My goal is to retrieve the values associated with /countries/:id when accessing /countries/1. routesMap.get('/countries/1') // should provide the ...

Tips for contacting the giveaway host after the giveaway has finished

I am currently utilizing the Discord Giveaways module. I am interested in learning how to send a direct message to the host of the giveaway once it has ended. I haven't quite figured out how to do that yet. Here is what I have gathered so far: manag ...

The controller receives a POST response from the service through $http

How can I retrieve the response from a Service in the following scenario? Service: app.factory('ajaxService', function($http) { updateTodoDetail: function(postDetail){ $http({ method: "POST", headers: {' ...

"Experience the power of using Selenium with Node.js in an asynchronous function

I'm currently developing a simple program that retrieves the titles of all the links when conducting a search on Google using Selenium Take a look at the code below: const {Builder,By, Key, until} = require('selenium-webdriver'); driver = ...

Utilizing the forEach method for decision-making

Here is an array called 'array' with values [10, 15, 20] var array = [10, 15, 20]; There is also a variable named N with a value of 20: var N = 20; I need to iterate through the array and check if N is greater than all numbers in the array in ...