Check if link has https:// in angularjs

Question

I have tons of data in JSON format in my angular app,

[
  {"link": "https://stackoverflow.com"},
  {"link": "https://stackoverflow.com"},
  {"link": "id-aW783D"}, //This is a wrong data
  {"link": "https://stackoverflow.com"}
]

But as you can see in JSON, 3rd object has an invalid value (NOT A LINK),

Now I need to bind those links with a on it, but {"link": "id-aW783D"} goes invalid in a because it's not a valid URL.

I added this code to avoid invalid links, but with this code and heavy data, app takes lots of time to load.

for(i; i < $scope.data.length; i++){
 item = $scope.data[i];
 if (item.link.indexOf("https://")){
   item.ID = item.link;
 }
 else item.ID = '';
}

Now my Question is, is there any other way to do this, like with ng-if ?

angular.module('myApp', []).controller('myCtrl', function($scope) {

  $scope.data = [
    {"link": "https://stackoverflow.com"},
    {"link": "https://stackoverflow.com"},
    {"link": "id-aW783D"},
    {"link": "https://stackoverflow.com"}
  ];
  var i = 0;
  for (i; i < $scope.data.length; i++) {
    item = $scope.data[i];
    if (item.link.indexOf("https://")) {
      item.ID = item.link;
    } else item.ID = '';
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
  <ul ng-repeat="j in data track by $index">
    <li ng-if="j.ID">{{j.link}}</li>
    <li ng-if="!j.ID"><a href="{{j.link}}">{{j.link}}</a></li>
  </ul>
</div>

You can use filter!

evolutionxbox
– evolutionxbox

2017-03-14 13:58:04 +00:00
Commented Mar 14, 2017 at 13:58 — evolutionxbox
– evolutionxbox, Commented Mar 14, 2017 at 13:58

Petr Averyanov · Accepted Answer · 2017-03-14 14:04:09Z

1

Js is quite fast. Ng-if is much slower. As well as rendering html tags

I.e. running your "for" for 1 million objects:

var start = new Date();
for(i = 0; i < 1000000; i++){
 item = {link: '123321https://'};
 if (item.link.indexOf("https://")){
   item.ID = item.link;
 }
 else item.ID = '';
}
console.log(new Date() - start)

Takes 139ms in my chrome.

I doupt my computer will survive page having 1kk links on page.

Actually what you need is virtual/infinite scroll.

answered Mar 14, 2017 at 14:04

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

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

2 Comments

Abhishek Pandey Over a year ago

Your above example is fast but not in my case, I have nested json data on large scale, maybe I need to add server side pagination, thanks for you response. :)

Petr Averyanov Over a year ago

Point is that any js-function processing result will be much faster than rendering tags until you have some really heavy calculations. So thin point is rendering not JS.

funcoding · Accepted Answer · 2017-03-14 14:03:33Z

0

Use: ng-show="j.ID.indexOf('https') == 0"

answered Mar 14, 2017 at 14:03

funcoding

9017 silver badges12 bronze badges

Comments

Aaron Ballard · Accepted Answer · 2017-03-14 14:08:34Z

0

If you want to optimize for larger amounts of data, you don't want to offload that filter logic to the template. You could try different logic, such as

var data_to_render = $scope.data.filter(function(item) {
    return item.link.indexOf("https://") === 0;
})

That will return a new array, since mutation in javascript can be costly, and avoids assigning to that item variable X times.

Other than that, if you're just showing a list of data, you'll probably want to limit the number of elements shown as much as possible. Filtering through hundreds of thousands of items in an array isn't really an issue, it's rendering them all at once that will slow down most devices.

answered Mar 14, 2017 at 14:08

Aaron Ballard

6017 silver badges10 bronze badges

Collectives™ on Stack Overflow

Check if link has https:// in angularjs

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related