How To Add Url To An ng-repeat If Not Provided In JSON Object

Question

I have a JSON object returning from a httpq call. One of the properties is LinkUrl. Sometimes this will have a predetermined url that comes from the returned object, other times it will just have a file name in which I'll need to prepend a base url to the beginning of that file name.

Not sure if there is a more angular way to do this or if it needs to be a regex if statement.

Below i have the returned LinkUrl that is just the file. If there is no url, I need to prepend a url to the file where it will be hosted so it outputs http://mycorp.com/stores/files/store11_OKC_Docs.pdf to my view.

Any help appreciated.

 0: Object
$$hashKey: "00B"
GroupId: "1"
GroupName: "Store # 11 - OKC"
LanguageName: "English"
LinkTypeAbbr: "Store_Docs"
LinkTypeDescr: "Store Documents"
LinkTypeId: "1"
LinkUrl: "store11_OKC_Docs.pdf"

Is there any possibility that you will get the string `http://` in your key `LinkUrl` when it is file name ? — Achu, Nov 25 '15 at 18:22
it will either return like above or like http://otherstore.com/stores/files/xxx.pdf with the http:// — billy_comic, Nov 25 '15 at 18:51

score 0 · Answer 1 · answered Nov 25 '15 at 18:24

0

You can do something like

<a href="{{'http://' in obj.LinkUrl ? obj.LinkUrl : baseUrl + obj.LinkUrl}}" >{{obj.GroupName}}</a>

answered Nov 25 '15 at 18:24

Zohaib Ijaz

21,926
7
38
60

score 0 · Answer 2 · edited May 23 '17 at 11:44

You can use regex for checking whether that field is url or not. You can find answer for that here >> https://stackoverflow.com/a/5717133/211458 (shared code below)

function ValidURL(str) {
  var pattern = new RegExp('^(https?:\/\/)?'+ // protocol
    '((([a-z\d]([a-z\d-]*[a-z\d])*)\.)+[a-z]{2,}|'+ // domain name
    '((\d{1,3}\.){3}\d{1,3}))'+ // OR ip (v4) address
    '(\:\d+)?(\/[-a-z\d%_.~+]*)*'+ // port and path
    '(\?[;&a-z\d%_.~+=-]*)?'+ // query string
    '(\#[-a-z\d_]*)?$','i'); // fragment locater
  if(!pattern.test(str)) {
    alert("Please enter a valid URL.");
    return false;
  } else {
    return true;
  }
}

if (!ValidURL(yourObject.LinkUrl)) {
  yourObject.LinkUrl = yourAddress + yourObject.LinkUrl
}

Above logic, can be added just after fetching data and you don't have to touch ng-repeat for this (I assume you are open for options other than handling in ng-repeat). — Sasikumar D.R., Nov 25 '15 at 18:33

score 0 · Answer 3 · answered Nov 25 '15 at 18:28

<a href="{{chckeURL(obj.LinkUrl)}}">file</a>

$scope.chckeURL = function(url){
     /*Check here this is only a file name or full URL.
      using HTTP is present in the string or not.
      generate final url and return it  
     */
return finalURL;
}

How To Add Url To An ng-repeat If Not Provided In JSON Object

3 Answers3