How to display Database data using Angular JS?

Question

How to handle mapping DB Tables to Angular Display which I think is one of the most common requirements in WebApps ?

There are several factors that needs to be considered .

1)For displaying the records , a 2D JSON would be fine ?

Like for example :

var myList = function($scope){
    $scope.foods = [
        {name:"Pizza" , price:100},
        {name:"Pasta" , price:50},
        {name:"Burger" , price:30},
        {name:"Pepsi" , price:10},
        {name:"Icecream" , price:15}
       ]
    };

And for the refresh the view part , Is it good idea to sent a JSON of Primary IDN's for refreshing the view form Server ?

2) Where should pagination be handled . I think a complete server side pagination is won't take advantage of Angular's front end capabilities like Filter ?

Short data say < 1000 records would probably be better sent to server , While large data like 'search' can be paginated server side would be a good trade off ?

For example :

Table : Student


IDN Name  Univeristy Age 
1   Mark  USC        21
2   ...
3   ...
4   John  UFL        21

mingos · Accepted Answer · 2014-05-28 10:35:30Z

1

An array of objects is absolutely fine, and easy to use inside ngRepeat. When refreshing the data, the logic is up to you - you can either send the indices to refresh (and then update them in your model when needed) or just request a new response from the backend. The latter is obviously easier, but whether it's actually better depends on your app and your requirements. In order to reduce resource usage, remember to use track by on your ngRepeat:

<table>
    <tr ng-repeat="user in users track by user.id">
        <!-- data -->
    </tr>
</table>

As for the pagination, what I usually do is to set up pagination on the front end and send out limit and offset params to the backend server with each request. The only thing to remember is that the backend must return the requested data AND the total number of items in the queried table. I usually prefer to send this number in a header so that all data is sent in one request. Based on the knowledge Angular.js has (current limit, offset and total number of items), pagination can be implemented with little effort.

answered May 28, 2014 at 10:35

mingos

24.7k12 gold badges73 silver badges108 bronze badges

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

1 Comment

Nishant Over a year ago

Interesting perceptive . I agree the logic is for us to decide and hence the question :-)

bakkal · Accepted Answer · 2014-05-28 10:29:42Z

1

You could use ng-grid http://angular-ui.github.io/ng-grid/ Basically you just send a JSON array of objects from the server, like your foods example

To support large datasets you can setup server-side pagination, filtering and sorting on ng-grid, you accomplish that by sending a params object back to the server that has the page/filter/sort information you will need on the server API to return the specific data e.g.

$http({ url: "/api/foods", method: "GET", params: myPageSortFilter })

answered May 28, 2014 at 10:29

bakkal

55.6k12 gold badges136 silver badges113 bronze badges

1 Comment

Nishant Over a year ago

Thanks for pointing out in ng-grid , would be curious to check how different it is from ng-repeat .

Collectives™ on Stack Overflow

How to display Database data using Angular JS?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related