CODEWITHSUNDEEP
javascriptangularjsajaxhttp
Lakshmi Prasanna
Lakshmi Prasanna

Reputation: 456

Handling larger data in angular js

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>

Upvotes: 1

Views: 511

Answers (2)

J Carv
J Carv

Reputation: 101

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:

  1. Use pagination on the server side, so you only ask for the portion of data the user is viewing.
  2. 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).

Upvotes: 1

Thomas Juh&#225;sz
Thomas Juh&#225;sz

Reputation: 232

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?

Upvotes: 0

Related Questions