Is there a way to create a hyperlink in a JSON file that links to text within the same JSON using AngularJS?

The JSON structure I am working with is shown below:

[
  {
    "_id": "0",
    "_rev": "1",
    "url": "fb.com",
    "ownership": {
      "line": "social"
    },
    "id": 13,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-9X",
        "level30_desc": "facebook",
        "level30_id": "6941-0P",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-0P"
      }
    ]
  },
  {
    "_id": "02ad9973a97f82db1c",
    "_rev": "1-8788cdde1205ca608a3",
    "url": "www.google.com",
    "ownership": {
      "line": "social"
    },
    "id": 159,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-9L",
        "level30_desc": "google",
        "level30_id": "6941-9L",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-9L"
      }
    ]
  },
  {
    "_id": "01c555f2333a97f82e837",
    "_rev": "1-0101ae7cc842f43c9a40",
    "url": "www.twitter.com",
    "ownership": {
      "line": "social"
    },
    "id": 14,
    "hierarchies": [
      {
        "level": 30,
        "level40_desc": "",
        "pairing": "6950-8M",
        "level30_desc": "twitter",
        "level30_id": "6941-8M",
        "mirror": "",
        "level17_id": "1CMA",
        "fin_div": "M3",
        "id": "6941-8M"
      }
    ]
  }
]

Within the controller, I have stored this JSON data in vm.searchData. In the HTML display, I am rendering the data as follows:

<div ng-repeat="item in vm.searchData track by $index">
    <div id="{{item.url}}">
        <a class="search-results" href="" ui-sref="." ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a>
    </div>
</div>

If I want to create hyperlinks for the displayed elements and make them open in a new tab when clicked, how can I achieve this functionality?

javascriptangularjsjson

Answer №1

Utilize the ng-href directive to assign the URL to the href attribute, ensuring target is set as _blank for opening in a new tab:

<a class="search-results" ng-href="//{{item.url}}" target="_blank" ng-repeat ...

Remember to exclude ui-sref from a tags to prevent UI router's state URLs from overriding your links. Also, prefixing URLs without protocol with // will make them absolute.

View the demo below:

angular.module('app', [])
  .controller('ctrl', function($scope) {
    $scope.searchData = [{
        "_id": "0",
        "_rev": "1",
        "url": "fb.com",
        "ownership": {
          "line": "social"
        },
        "id": 13,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-9X",
          "level30_desc": "facebook",
          "level30_id": "6941-0P",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-0P"
        }]
      },
      {
        "_id": "02ad9973a97f82db1c",
        "_rev": "1-8788cdde1205ca608a3",
        "url": "www.google.com",
        "ownership": {
          "line": "social"
        },
        "id": 159,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-9L",
          "level30_desc": "google",
          "level30_id": "6941-9L",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-9L"
        }]
      },
      {
        "_id": "01c555f2333a97f82e837",
        "_rev": "1-0101ae7cc842f43c9a40",
        "url": "www.twitter.com",
        "ownership": {
          "line": "social"
        },
        "id": 14,
        "hierarchies": [{
          "level": 30,
          "level40_desc": "",
          "pairing": "6950-8M",
          "level30_desc": "twitter",
          "level30_id": "6941-8M",
          "mirror": "",
          "level17_id": "1CMA",
          "fin_div": "M3",
          "id": "6941-8M"
        }]
      }
    ];
  });
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl">
  <div ng-repeat="item in searchData track by $index">
    <div id="{{item.url}}">
      <a class="search-results" ng-href="//{{item.url}}" ng-repeat="item1 in item.hierarchies track by $index">{{item1.level30_desc}}-{{item1.level30_id}}</a></div>
  </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Using a regular function as a jQuery value in jQuery

I am attempting to retrieve the value 'col' that is specified in the HTML code, and then use it as the background color for an element. Here is the JavaScript function: function setBackgroundColor(col) { $("#BG").animate({ backgroundCol ...

javascriptjqueryfunction

Execute jQuery code only when a child element within the parent container is clicked

Within a div section, I have included various child controls like dropdowns and check boxes. I am seeking to implement some jQuery code that will be triggered when any of the child elements are clicked, excluding clicks on the empty space within the div. ...

javascriptjquery

Issue with Bootstrap tab display of content

I'm having trouble with the tabs in my page. When I click on each tab, the content doesn't display correctly. Here is my code: <div class="w470px exam" style="border: 1px solid #ddd; margin-top: 30px;"> <ul id="myTab" class="nav nav ...

javascriptjquerycsstwitter-bootstrap

Adding a JSON object to an API call: step-by-step guide

I have a variety of Objects stored in an array that are generated dynamically. My goal is to save each Object separately by sending it through an API. The challenge lies in the fact that there can be numerous Objects in the array. What would be the most ef ...

javascriptjsonangulartypescript

Utilizing Ramda JS for multi-dimensional grouping

I've been attempting to group the object by tag, folder, and report keys using GroupBy at multiple levels. While I was successful in grouping at a single level, I encountered difficulty in progressing further. const data = [{ "_index": "search_in ...

javascriptarraysjsonramda.js

Utilize play-json library to efficiently process nested JSON data

We've got a JSON structure like this: { "-KULpL4Qrzt4z8Go": { "dateTime": 1476778076353, "partyName": "AMBA", "partyId": "A101", "points": { "-KULr3tag86GlJSZp": { "lat": 71.1426377, ...

jsonscalaplayframework

Syntax Error in Node.js for MongoDB: Unexpected token or invalid symbol

I'm having trouble figuring out what's going on. Node v16.4.2, NPM v7.18.1 const mongoose = require("mongoose"); // const dotenv = require('dotenv') require('dotenv').config({path:'variables.env'}); mongoo ...

javascriptnode.jsmongodbmongoose

At what point in time is the $digest cycle invoked?

I am feeling a bit perplexed about how a digest cycle operates. Is it scheduled to run periodically at intervals of 50ms (as mentioned here and suggested here), or is it triggered after every event that enters the angular context (as explained here, here, ...

angularjsdata-binding

Storing and assigning variable values within Angular.js

I have a multi-tabbed application with two separate controllers. Each time a tab is entered, I need to make an API call. Once the response is obtained, it does not need to be fetched again when revisiting that tab. My query revolves around the most effici ...

angularjsangularjs-scope

Adjusting the height of each suggested item in Jquery autocomplete

I am currently facing an issue with the autocomplete input on my web app. The suggested list items have a height that is too small, making it difficult to select one item on a tablet using fingers. .ui-autocomplete.ui-widget { font-family: Verdana, Arial, ...

javascriptjquerycssautocompletejquery-ui-autocomplete

Discovering the presence of a component in Angular 1.5

Link to embedded content $injector.has('myMessageDirective') is returning true, while $injector.has('myMessageComponent') is not. Has anyone else encountered this issue or found a solution? I am concerned that my components may not be ...

javascriptangularjsangularjs-directiveangular-components

Preventing CSRF attacks using AJAX in a Django application

After some troubleshooting, I discovered the mistake in my HTML code. Simply adding {% csrf_token %} resolved the issue :) Big thanks to everyone who helped! (I followed the JavaScript snippet provided in the initial response but I'm still encounte ...

javascriptjqueryajaxdjangocsrf

Angular routes cause a glitch in the Bootstrap navbar, causing it to shift to the left on certain active

Apologies for the simple question, I am new to web design and couldn't find a solution even after extensive googling and searching. The issue I am facing is that when clicking on "EX5" or "EX6" in my navbar, it shifts to the left side of the screen i ...

javascripthtmlcssangularjsbootstrap-4

Is utilizing Promise.All more practical than async.each in this scenario?

Looking for a more efficient way to build an array instead of using async.each. Are there any alternative approaches in ES6 that I should consider? Would Promise.All be a better solution? async pushDataArray(response) { if (response && response.data & ...

javascriptnode.js

Troubleshooting issues with sending POST requests in node.js

I've been attempting to initiate a post request, but for some reason, it's not going through. Strangely, I'm not seeing any output in the console log of my browser. My node server.js is up and running on x.x.x.x:8000. I've connected it ...

phpjavascriptjquerynode.js

Return structured data through a node.js JSON API

I'm currently working on developing an API using Node.Js and MySQL, and I'm faced with the challenge of organizing the data returned by the API. When creating a new record through a POST request, the data submitted looks like this: { "S ...

mysqlnode.jsjsonexpress

After signing out and logging back in, data fails to display - ReactJS

I am encountering difficulties with the login/logout process and displaying data in a form. When I restart my server and log in without logging out, everything works fine and the data appears in the form. However, if I log in, then log out, and log back in ...

javascriptreactjscomponentsjsx

Unexpected JSON data received compared to JSON data sent in Spring Rest and Hibernate

I'm facing challenges with integrating Spring Rest and Hibernate into my Android application. Specifically, I am encountering an issue with one of the POST calls in my API requests. In my project, I have two main classes: Player and Game. @Entity @T ...

javajsonspringhibernatespring-rest

Updating multiple values within a JSON object, jsObject, or string

After receiving a response from a web service, I need to replace certain values in the response with custom values that I have defined. One possible approach is to create a tree traverser to identify the specific values and replace them with the custom va ...

javascriptjsonregexstringreplace

Please display the following slide for the current .flexslider

Looking for assistance in modifying this jQuery script to only move to the next slide for the specific object clicked, rather than affecting all instances of .flexslider on the page. $(window).load(function() { $('[id^=flexslider_]').flexslide ...

javascriptjqueryflexslider