How to update data from database with api call in angular

Question

I have a api call who give me the list of data, and I am iterating data via ng-repeat (its a list of more than 100 items)

For getting list of data I have call an Api in App Controller in angularjs like this:

 var path = serverUrl + 'api/getAllMails';
    $http.get(path).then(function (result) {
      $scope.mails=result
    })

For Iterating the mails in Html file i have use table like the below

<table>
    <tr class="header">
        <th class="center">Id</th>
        <th class="center">Mode of Payment</th>
        <th class="center">Payment Collected</th>
        <th class="center">Status</th>
    </tr>
    <tr ng-repeat="mail in mails">
        <td>{{mail.id}}</td>
        <td>{{mail.paymentType}}</td>
        <td>Rs. {{mail.cost}}
            <input type="text" ng-model="mail.cost">
            <button ng-click="updateCost=(mail.id, mail.cost)">Update Cost</button>
        </td>
        <td>{{mail.status}}
            <input type="text" ng-model="mail.status">
            <button ng-click="updateStatus(mail.id, mail.status)">Update Status</button>
        </td>
    </tr>
</table>

Suppose in the first iterations the cost will be "100" and the status will be "pending". And I have to update this row only, change cost to "1000" and status will be "Delivered".

In my App controller of Angularjs I have create methods. These two methods are calling apis and updating data in database and return the list of updated mails.

$scope.updateStatus = function(mailId, mailStatus) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailStatus: mailStatus
        }
    }).then(function(result) {
        $scope.mails = result
    })
}

$scope.updateCost = function(mailId, mailCost) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailCost: mailCost
        }
    }).then(function(result) {
        $scope.mails = result
    })
}

These code are working fine but while it took lot of time to load a page. So what can I do to reduce the loading time or is there any better way to do the same thing.

Any help will be appreciable. Thank you

What is taking long? The API call (pending) or the ng-repeat? — Billy
– Billy, Commented Jul 9, 2015 at 7:00
add an track by $index or track by mailId on your ng-repeat, probably not a huge difference, but it will help. — Avraam Mavridis
– Avraam Mavridis, Commented Jul 9, 2015 at 7:02
Guess the api call is taking a long time. Max you can do from front end part is that you can make the call on some button click or something or add a loader. So that the user experience will be much better. — Shouvik
– Shouvik, Commented Jul 9, 2015 at 7:03
So your api is returning the complete collection from your database after every update? Could you not just return the updated row and replace the relevant object in your front-end model with the updated one? — Matt Herbstritt
– Matt Herbstritt, Commented Jul 9, 2015 at 7:16

Eric Herlitz · Accepted Answer · 2015-07-09 07:18:09Z

1

You are replacing the entire dataset when there is no reason for that, you should only update the row you change. Ensure your updateStatus return the object you update and update that item in $scope.mails

In example

$scope.updateCost = function(mailId, mailCost) {
    var path = serverUrl + 'api/updateStatus';
    $http.get(path, {
        params: {
            mailId: mailId,
            mailStatus: mailCost
        }
    }).then(function(result) {
        // result is the item you changed
        for (var i = $scope.mails.length - 1; i >= 0; i--) {
            if($scope.mails[i].id === mailId) {
                $scope.mails[i] = result;
                return;
            }
        };
    })
}

answered Jul 9, 2015 at 7:18

Eric Herlitz

26.4k28 gold badges117 silver badges167 bronze badges

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

4 Comments

Edd Over a year ago

Is it just me, or would it be much better if this was done using services and the data loaded on the appconfig?

Naren-Mehta Over a year ago

Hi @Eric I am using the same as you defined the above but its not updating the row. Can you please explain it more or is there are any examples like this. Thanks

Naren-Mehta Over a year ago

The problem is solved now I followed @Eric Herlitz's answer, Instead of load all the list again and again, I just update the selected row, like Eric done in above answer. Thank you so much all of you , I really appreciate you efforts.

Eric Herlitz Over a year ago

@Naren-Mehta Great, than please accept this as the answer

Collectives™ on Stack Overflow

How to update data from database with api call in angular

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related