What is the process for updating the list to retrieve fresh data from the service?

Question

What is the process for updating the list to retrieve fresh data from the service?

I am currently in the process of calling a web service to retrieve data and display it in a list using directives.

Upon loading my fiddle, I successfully load data from a JSON file. The data is displayed correctly in the list.
If I click the delete button, all items are removed from the list, which works as expected.
However, when I click the refresh button, I want to call the service again to fetch fresh data but it does not show up in the list. Why?

Here is my code snippet: https://jsfiddle.net/8fjhLqnw/10/

.controller('he', function($http, $scope, sharedData) {
    var h = this;

    h.referesh=function(){
        sharedData.get();
    }
    h.delete = function() {
        sharedData.delete()
    }
});

Please check out the updated version on Plunker:

http://plnkr.co/edit/iMpStNneDmIsabTnFqpP?p=preview

In simple terms, clicking the refresh button should load data from data.json and display it in list form.

javascript angularjs angularjs-directive angularjs-scope angular-ui-router

Answer 1

Answer №1

Check out the latest code snippet

The issue arises from constantly refreshing the reference to sharedData.data in your refresh function. The f controller establishes a binding to sharedData.data (i.e. vm.data = sharedData.data) before the data is actually refreshed, causing the vm.data reference to remain static (pointing to the original deleted array). To resolve this, create a direct reference to sharedData itself and access the data property internally from the template:

// continuation of module definition
.directive('tm', function() {

    // utilize vm.sharedData.data in the template
    return {
        restrict: 'E',
        template: '<div><ul><li ng-repeat="n in vm.sharedData.data">{{n.name}}</li></ul></div>',
        scope: {},
        controller: 'f',
        controllerAs: 'vm'

    };
}).controller('f', function($http, $scope, sharedData) {
    var vm = this;
    // initialize shared data
    sharedData.get().then(function(){
    vm.sharedData = sharedData;
    });

Following a data refresh, the data property within sharedData will reset and be reflected in the template because the scope maintains a constant reference to sharedData (which remains unchanged). Consequently, any modifications made to the sharedData object (such as refreshing the data property) will be detected by the template.

Answer 2

Check out the latest code snippet

The issue arises from constantly refreshing the reference to sharedData.data in your refresh function. The f controller establishes a binding to sharedData.data (i.e. vm.data = sharedData.data) before the data is actually refreshed, causing the vm.data reference to remain static (pointing to the original deleted array). To resolve this, create a direct reference to sharedData itself and access the data property internally from the template:

// continuation of module definition
.directive('tm', function() {

    // utilize vm.sharedData.data in the template
    return {
        restrict: 'E',
        template: '<div><ul><li ng-repeat="n in vm.sharedData.data">{{n.name}}</li></ul></div>',
        scope: {},
        controller: 'f',
        controllerAs: 'vm'

    };
}).controller('f', function($http, $scope, sharedData) {
    var vm = this;
    // initialize shared data
    sharedData.get().then(function(){
    vm.sharedData = sharedData;
    });

Following a data refresh, the data property within sharedData will reset and be reflected in the template because the scope maintains a constant reference to sharedData (which remains unchanged). Consequently, any modifications made to the sharedData object (such as refreshing the data property) will be detected by the template.

What is the process for updating the list to retrieve fresh data from the service?

Answer №1

Similar questions

Exploring the Realm of Angular Controllers and Services: Embracing Triumphs and

Unable to display bar chart on PHP webpage showing database number volumes using JavaScript

JavaScript/CSS memory matching game

What could be causing the inconsistency in the success rate of my Get request, with it working occasionally but returning a

directive in Angular pointing to a specific controller

Dealing with Unhandled Promise Rejections in Express.js

What is the best way to access attributes from a div element?

Unable to retrieve JSON data in servlet

"Troubleshooting null values in an Angular form submission handled by a C# MVC

Properly maintaining child processes created with child_process.spawn() in node.js

Displaying or concealing dropdown menus based on a selected option

Is it possible to create a dynamic zig-zag design with CSS that

Exploring the capabilities of Jasmine testing with AngularJS's $locationChangeSuccess event

Merging the functions 'plainToClass' and 'validate' into a single generic function in NodeJs

How to access data from a child component in a Vue 3 template

Performing unit testing on two services that reside in separate modules using the Jasmine testing framework

The functionality of Object.assign in REACT is producing unexpected and incorrect results

Error in compiled.php on line 7772: Laravel throwing a RuntimeException when sending HTTP requests from Angular

Attempting to grasp the sequence in which setTimeout is ordered alongside Promise awaits

issues with the redirection functionality in the Play framework