Angular loop is not updating

Question

Just started out with angular. I was successful in saving and retrieving the data from a DB with php. I am also able to loop the data within a list item but when i add a new user the list does not update only when i refresh the browser does it show the newly added user

this is my html code:

<div>
    <ul ng-init="get_user()">
        <li ng-repeat="user in userInfo ">{{user.user_name}}<a href="" ng-click="prod_delete(product.id)"> --> Delete</a></li>
    </ul>
</div>

this is my app.js code:

var app = angular.module('AddUser', ['ui.bootstrap']);

app.controller('AppCtrl', function($scope, $http){
    $scope.userInfo =  [];

    /** function to add details for a user in mysql referecing php **/
    $scope.save_user = function() {

        $http.post('db.php?action=add_user', 
            {
                'user_name'  : $scope.user_name, 
                'user_email' : $scope.user_email
            }
        )

        .success(function (data, status, headers, config) {
            $scope.userInfo.push(data);
            console.log("The user has been added successfully to the DB");
            console.log(data);
        })

        .error(function(data, status, headers, config) {
            console.log("Failed to add the user to DB");
        });
    }

    /** function to get info of user added in mysql referencing php **/
    $scope.get_user = function() {
        $http.get('db.php?action=get_user').success(function(data)
        {
            $scope.userInfo = data;   
            console.log("You were succesfull in show user info"); 
            //console.log(data);
        })
    }

    });

you should call the $scope.get_user() method to fetch data from DB again — Pankaj Parkar
– Pankaj Parkar, Commented Jun 24, 2015 at 17:46
OP as parkar said it should be done as ng-init is called only once. — squiroid
– squiroid, Commented Jun 24, 2015 at 17:48
but GY22 is pushing data into userInfo in success of $http.post — Ajay Narain Mathur
– Ajay Narain Mathur, Commented Jun 24, 2015 at 17:50

Pankaj Parkar · Accepted Answer · 2015-06-24 18:42:09Z

1

As you are doing post call which is saving data to DB through server method, but in you success of post call you are pushing that data in userInfo object which technically sounds wrong.

I'd prefer you to make an ajax to get new data from db using $scope.get_user() after post call gets succeed.

Code

$scope.save_user = function() {
    $http.post('db.php?action=add_user', {
       'user_name'  : $scope.user_name, 
       'user_email' : $scope.user_email
    }).success(function (data, status, headers, config) {
       //$scope.userInfo.push(data); //remove this line
        $scope.get_user(); //this will fetch latest record from DB
        console.log("The user has been added successfully to the DB");
        console.log(data);
    }).error(function(data, status, headers, config) {
        console.log("Failed to add the user to DB");
    });
}

answered Jun 24, 2015 at 18:42

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Comments

Kevin F · Accepted Answer · 2015-06-24 17:55:21Z

0

Try changing save user to this:

$scope.save_user = function() {
    $http.post('db.php?action=add_user', {
        'user_name'  : $scope.user_name, 
        'user_email' : $scope.user_email
    })
    .success(function (data, status, headers, config) {
        $scope.userInfo.push(data.data);
        console.log("The user has been added successfully to the DB");
        console.log(data);
    })
    .error(function(data, status, headers, config) {
        console.log("Failed to add the user to DB");
    });
}

I think your data that you are returning is an object and whatever data you are expecting would be data.data, so you are pushing an invalid object to your userInfo array

edited Jun 24, 2015 at 17:55

answered Jun 24, 2015 at 17:48

Kevin F

2,8852 gold badges18 silver badges22 bronze badges

2 Comments

Icycool Over a year ago

I'd suggest pushing the added user name and email from the http response to make sure things are added correctly, in case you have some param name typo and actually saved blank in some fields.

Kevin F Over a year ago

Updated, I think the problem is that the data is returned under data.data so the keys that the loop is looking for don't exist on the object he is pushing

Collectives™ on Stack Overflow

Angular loop is not updating

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related