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.

Yes, it is possible just encode the HTML and then decode it. To append it into the view use ng-sanitize — Raulucco
– Raulucco, Commented Feb 24, 2016 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: jsfiddle.net/oLhr2ser/30 — roob
– roob, Commented Feb 25, 2016 at 7: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
– Raulucco, Commented Feb 25, 2016 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: jsfiddle.net/oLhr2ser/33 — roob
– roob, Commented Feb 25, 2016 at 18:35

Raulucco · Accepted Answer · 2016-02-26 09:09:20Z

2

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

answered Feb 26, 2016 at 9:09

Raulucco

3,4261 gold badge23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:13:41Z

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, 2017 at 12:13

CommunityBot

11 silver badge

answered Feb 24, 2016 at 20:34

slugonamission

9,6741 gold badge36 silver badges41 bronze badges

3 Comments

roob Over a year ago

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 Over a year ago

Here is a fiddle, tried to follow this method on just four entries and nothing is coming up: jsfiddle.net/roob/oLhr2ser/26

roob Over a year ago

I have an updated fiddle, almost there but acts weird: jsfiddle.net/oLhr2ser/30

Collectives™ on Stack Overflow

hyperlinks within json string

2 Answers 2

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related