Handling larger data in angular js

Question

I am calling some predefined data from angular service. Since it is huge data(4 MB), In the backend(Java) code, they are getting this data in the server startup and storing it in the session. My Problem is when I am calling that service from any rest client it is taking 5 seconds. But when I call it from UI it is taking 50 to 60 seconds.

When I check in the network tab, status is showing like pending only, but I see the response.

This issue is not coming in local. Only when we deploy in the server getting this issue.

What is the wrong I am doing here. How to handle this much huge data while calling it from angular js.

I am calling service.

using data in the table ..

I am getting all the dropdowns data at a time istead of multiple calls

              <tr ng-repeat="list in teamsFilterData" >
                <td ng-show="odsObj.teamsFilterData.supportedAttributesList[$index].filter">{{odsObj.teamsFilterData.supportedAttributesList[$index].filter}}</td>
                <td ng-show="odsObj.teamsFilterData.supportedAttributesList[$index].filter">:</td>                      
                <td ng-show="teamsFilterData.supportedAttributesList[$index].filter">
                    <div class="dropdown">
                                <button class="btn btn-default dropdown-toggle supported-products-default" type="button" data-toggle="dropdown" aria-expanded="true">
                                    Select {{teamsFilterData[$index].filter.split('Supported')[1]}}<span class="caret caret-postion"></span>
                                </button>
                                <ul class="dropdown-menu supported-products-default" role="menu">
                                    <div class="input-group col-md-12">
                                                                                                                                        <span class=" glyphicon glyphicon-search"></span>
                                                </button>
                                            </span>
                                    </div>
                                    <li  style="margin-left: 10px;" ng-repeat="product in odsObj.teamsFilterData[odsObj.teamsFilterData.supportedAttributesList[$index].name] | filter:searchText | limitTo:10" >
                                    <input ng-attr-name="{{product.id}}" type="checkbox" ng-checked="product.added" >
                                    <label>{{product.filter}}</label>
                                    </li>
                                    </li>
                                </ul>
                    </div>
                </td>
              </tr>

Please add some code examples of how you get the data and where you use it. — henrikmerlander
– henrikmerlander, Commented Sep 19, 2016 at 13:53

J Carv · Accepted Answer · 2016-09-19 15:48:04Z

1

Since 4Mbs is a lot of information, even if you are showing it directly you will have some problems with angular performance (especially if you use the ng-repeater directive). So you need to think on a solution to avoid requesting the entire data at the same time, and there are different solutions for it.

First of all, you need to think on this question. Do you need all the data? Normally the answer is no, so in that case you should approach one of these solutions:

Use pagination on the server side, so you only ask for the portion of data the user is viewing.
On the other side, regarding your app's desing you can use infinite scroll, which is more or less the same as pagination but working with a scroll. Here's the component I usually use: https://sroze.github.io/ngInfiniteScroll/

Even if you need all the data, it's a good idea to implement a cache service and only request the data once. Storage the data in your browsers local storage (the component I use https://github.com/pamelafox/lscache) but be careful with the maximun size (~5Mbs in most browsers).

answered Sep 19, 2016 at 15:48

J Carv

1014 bronze badges

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

1 Comment

Lakshmi Prasanna Over a year ago

This data what I am rendering is data I need to show in the multiple dropdowns. So that user can select multiple values. So I don't have option to use pagination or other things

Thomas Juhász · Accepted Answer · 2016-09-19 13:41:19Z

0

I can't comment yet (need one more reputation), so I'll ask here sorry.

Are you also rendering the data? Did you test it without rendering, just putting a debugger into the then(..) to see when it gets data?

answered Sep 19, 2016 at 13:41

Thomas Juhász

2321 silver badge7 bronze badges

1 Comment

Lakshmi Prasanna Over a year ago

yes. after 50 seconds I am getting data. It is working fine in local. When code deployed into server, getting this issue

Collectives™ on Stack Overflow

Handling larger data in 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