CODEWITHSUNDEEP
angularjsjson
roob
roob

Reputation: 85

hyperlinks within json string

I have an angular template pulling JSON data into a calendar of events. Is there a way to have url links within a string in JSON such as:

    { "name" : "Lee Morgan",
      "interviewer":"interviewed by: <a href='http://onehungrymind.com/angularjs-dynamic-templates/'>Sonny Stitt</a>",
      "day" : "Saturday",
      "date": "April 18th",
    },

The reason why I need to do this is because some of my data has the "interviewer" variable and some don't - look at the image below. I thought maybe include the entire "interviewed by" line as a placeholder, but then the interviewer's name needs to be hyperlinked.


enter image description here

Upvotes: 3

Views: 14292

Answers (2)

Raulucco
Raulucco

Reputation: 3426

It is possible using ngSanitize and escaping the double quotes of the links. Might be good practice to encode the url too in case of any special characters, but not strictly needed.

{ "first_name" : "Lee",
    "last_name" : "Morgan",
    "day" : "Saturday",
    "date": "April 18th",
    "stage" : "norris-panel",
    "interviewer":", interviewed by: <a href=\"//onehungrymind.com/angularjs-dynamic-templates\" target=\"_blank\"><u>Art Blakey</u></a>",
    "genre" : "music",
    "work_title" : "Trumpet Dreams",
  "convrs_nmber":"1051",
    "time" : "10:00 am"
},

Upvotes: 2

slugonamission
slugonamission

Reputation: 9642

Angular will escape HTML automatically when inserting it into a template. You can use ng-bind-html to prevent this instead, e.g.

// In the controller
$scope.myObject = <the JSON object you provided>;

<!-- The view -->
<div ng-bind-html="myObject.interviewer"></div>

Source/related: AngularJS: Insert HTML from a string

Upvotes: 0

Related Questions