Angular view not refreshing after the array updates from $http

Question

I've the following code that displays table of data using ng-repeat, initially the model (array) will have no data, but upon request to an api it receives some data that i'm trying to update my model with, but unfortunately my view is not getting refreshed with model updates though I see that my model contains the new data that was received from api call.

Component code:

app.component('fooList', {
    bindings: {
        foo: '<'
    },
    templateUrl: '/app/foo.html',
    controllerAs: 'list',
    controller: function ($http,$scope) {
        let list=this;
        list.search=()=>{           
            $http.get('/ui/foo/'+ list.searchCriteria)
                 .success(response=>{
                     list.foo.searchResults=response.searchResults;
                 })
        }
    }
});

HTML View:

<tr ng-repeat="foo in ::list.foo.searchResults">
        <td>{{::foo.name}}</td>
        <td>{{::foo.address}}</td>
    </tr>

I've tried the following so far which didn't help

Setting the list.foo.searchResults to undefined initially, which is working fine for the first time, but if I send a different search criteria then again it is not refreshing.
$scope.$apply(), which I hate to do, but tried which is throwing digest in progress error.
Inside the success of $http i've tried the below code list.foo.searchResults=0; list.foo.searchResults.push.apply(list.foo.searchResults,response.searchResults);
Created one more child component and replaced my html with the child template and moved the code to populate the array in to that component.

Any help is really appreciated.

and also if u using arrow function no need to do let list = this — user1608841
– user1608841, Commented Sep 27, 2017 at 16:51

korteee · Accepted Answer · 2017-09-27 17:19:17Z

1

You have to remove one time data binding.

<tr ng-repeat="foo in list.foo.searchResults">
    <td>{{foo.name}}</td>
    <td>{{foo.address}}</td>
</tr>

edited Sep 27, 2017 at 17:19

answered Sep 27, 2017 at 16:52

korteee

2,7122 gold badges21 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ajay Srikanth Over a year ago

Oh man, you saved my day. Thanks. But I still don't understand why shouldn't I use one way binding as I'm not making any changes to my model from my view.

korteee Over a year ago

I misspelled. It's one time data binding. According to angularjs docs:

One-time expressions will stop recalculating once they are stable, which happens after the first digest if the expression result is a non-undefined value

Vignesh · Accepted Answer · 2017-09-27 16:52:29Z

1

Try removing :: or can you give a jsfiddle to work on

answered Sep 27, 2017 at 16:52

Vignesh

1,2221 gold badge10 silver badges17 bronze badges

Comments

mahip_j · Accepted Answer · 2017-09-27 16:56:26Z

1

:: is used to provide one way databinding , please remove it and then try

::if you are using this, even if your model is getting updated it will not allow to update view.

answered Sep 27, 2017 at 16:56

mahip_j

3682 silver badges11 bronze badges

1 Comment

Ajay Srikanth Over a year ago

ok, I totally misunderstood the concept of this one way binding. I was always under an impression that if there are no changes being made to the model by the view then we use ::

Kunvar Singh · Accepted Answer · 2017-09-27 17:06:46Z

0

You may try to update in the view section while you are fetching data from service, use $scope.$apply() in your controller section, where your are taking value from service(means storing in array).

or remove :: from your html part because its give to one way binding in angularjs.

answered Sep 27, 2017 at 17:06

Kunvar Singh

1,8852 gold badges16 silver badges21 bronze badges

Collectives™ on Stack Overflow

Angular view not refreshing after the array updates from $http

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related