Steps for including a URL in an ng-repeat when it is not included in the JSON object

Question

Steps for including a URL in an ng-repeat when it is not included in the JSON object

After making a http call, I am getting a JSON object. One of the properties within this object is LinkUrl. Sometimes, LinkUrl will contain a predetermined URL from the returned object, while other times it will only have a file name. In the latter case, I will need to add a base URL to the beginning of the file name.

I'm unsure whether there is a more angular-specific method to handle this scenario or if I should use a regex if statement.

Below, I have included the LinkUrl that only contains the file name. If there is no URL provided, I will need to prepend a URL specifying where the file will be hosted. This will result in the output being displayed in my view.

Any assistance on this matter will be highly 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"

javascript angularjs json regex

Answer 1

Answer №1

If you want to achieve this, you could try

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

Answer 2

If you want to achieve this, you could try

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

Answer 3

Answer №2

One way to validate if a field is a URL is by using regular expressions. You can refer to this helpful answer for more information: (shared code provided below)

function CheckURL(input) {
  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(input)) {
    alert("The provided URL is not valid.");
    return false;
  } else {
    return true;
  }
}

if (!CheckURL(yourData.UrlField)) {
  yourData.UrlField = defaultAddress + yourData.UrlField
}

Answer 4

One way to validate if a field is a URL is by using regular expressions. You can refer to this helpful answer for more information: (shared code provided below)

function CheckURL(input) {
  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(input)) {
    alert("The provided URL is not valid.");
    return false;
  } else {
    return true;
  }
}

if (!CheckURL(yourData.UrlField)) {
  yourData.UrlField = defaultAddress + yourData.UrlField
}

Answer 5

Answer №3

<a href="{{checkLink(obj.Url)}}">file</a>

$scope.checkLink = function(url){
     /*This function checks if the URL contains HTTP.
      If it does not contain HTTP, a final URL is generated and returned.
     */
return finalURL;
}

Answer 6

<a href="{{checkLink(obj.Url)}}">file</a>

$scope.checkLink = function(url){
     /*This function checks if the URL contains HTTP.
      If it does not contain HTTP, a final URL is generated and returned.
     */
return finalURL;
}

Steps for including a URL in an ng-repeat when it is not included in the JSON object

Answer №1

Answer №2

Answer №3

Similar questions

The implementation of async await within a switch case statement is failing to function properly

Axios cancel token preemptively cancelling request before it is initiated

Could someone provide some clarification on this callback related to node.js?

How to send a JavaScript variable to Flask and trigger an AJAX reload action

Imitate a worldwide entity with Jest and Typescript

Unable to invoke parent method from child component in Vue causing issue

Tips for preserving scroll position within a division following the redisplay of a division in Vue.js

What is the best way to animate various sprites using distinct buttons in HTML and CSS?

Guide to connecting two separate components from distinct pages in React/MUI

Instructions on creating a non-editable text area where only copying and pasting is allowed

Immersive Visual Symphony through Dynamic Multi-Layered

Tips for refining SQL query output by matching specific strings

Is there a way to modify the output Json during serialization on a broader scale, even if the class definitions are not modifiable?

Firefox and Internet Explorer do not support the functionality of HTML5 <audio> tags

Rearrange the items in an array that contain different data types

Is there a way to remove specific mesh elements from a scene in Unity?

Encountering Issues When Asserting Text with Selenium

The data retrieval process with angularjs is not functioning properly

In ReactJS, ensure only a single div is active at any given moment

ReactJS presents an issue where buttons on the navigation bar are not properly aligned