hyperlinks within json string

Question

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.

I think you should read more about [$sce](https://docs.angularjs.org/api/ng/service/$sce) — Alon Eitan, Feb 24 '16 at 20:32
Yes, it is possible just encode the HTML and then decode it. To append it into the view use ng-sanitize — Raulucco, Feb 24 '16 at 20:33
@Raulucco thank you I think I'm close, I got the desired display, however when I click on the url it loads it weird, plz take a look at the fiddle and click on Art Blakey in the view: https://jsfiddle.net/oLhr2ser/30/ — roob, Feb 25 '16 at 07:38
@roob I just checked it and the url that it dysplays seem normal to me. I changed the encode double quotes by escaped ones (`\"`) — Raulucco, Feb 25 '16 at 13:28
[RESOLVED] @Raulucco that did it, just the escape dashes and ng-sanitize. wish I could upvote your answer to earn privilege/ranking etc. thx again. updated fiddle in case if will help anyone else: https://jsfiddle.net/oLhr2ser/33/ — roob, Feb 25 '16 at 18:35
That's OK, I felt lazy. May be tomorrow I'll write an answer so anyone can find it — Raulucco, Feb 25 '16 at 18:38

score 2 · Answer 1 · answered Feb 26 '16 at 09:09

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"
},

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

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

edited May 23 '17 at 12:13

Community

1
1

answered Feb 24 '16 at 20:34

slugonamission

9,562
1
34
41

I'm not sure how this method would work in my case, not saying it will or wont. It seems this can only be applied to strings/objects one at a time, where in my case my data includes hundreds of entries, some have that extra bit and some dont – roob Feb 24 '16 at 22:13
Here is a fiddle, tried to follow this method on just four entries and nothing is coming up: https://jsfiddle.net/roob/oLhr2ser/26/ – roob Feb 24 '16 at 22:31
I have an updated fiddle, almost there but acts weird: https://jsfiddle.net/oLhr2ser/30/ – roob Feb 25 '16 at 07:39

hyperlinks within json string

2 Answers2