1

I have an AngularJS, JS, JQ, HTML5 web app, which can send different http methods to project's RESTful Web Service and receive responses from it. Response comes in JSON and looks like this:

enter image description here

This is displayed in a <pre> element this way:

<div ng-controller="responseController">
    <span class="status-{{response.status}}">{{response.code}} {{response.description}}</span>
    <pre>{{response.data}}</pre>
    <p id="responseHeaders">Response headers:</p>
    <table>
        <tr  ng-repeat="header in response.headers">
            <td><a href="#" ng-click="addToHeaders(header)">{{header.name}}</a></td>
            <td><span>{{header.value}}</span></td>
        </tr>
    </table>
</div>

What I want is to have all the URL's that are received in JSON clickable, so I could hang a ng-click on them and go on with next steps. But I can't do it in a <pre> element.

Any ideas how this can be solved? Every useful answer is highly appreciated and evaluated.

Thank you.

amenoire
  • 1,892
  • 6
  • 21
  • 34

2 Answers2

1

You will need to replace all URLs within the response body with links.

Take a look at this answer. You have some libraries there that will solve your problem.

Autolinker.js seems like a good choice.

Community
  • 1
  • 1
Catalin MUNTEANU
  • 5,618
  • 2
  • 35
  • 43
  • This is ok If the text is static. But in my case it is generating dynamically. And this huge string of text can contain unlimited amount of http addresses. How am I supposed to find every href inside of it to call this function? – amenoire Apr 14 '14 at 11:58
  • The library does this(the search) for you. Unlimited links?! You should not have any performance issues unless you have a few thousands links in your response. – Catalin MUNTEANU Apr 14 '14 at 12:02
1

You can achieve this using a directive (here's an example):

.directive('jsonLink', function() {
    var hrefLinks=function (obj, pretty) {
      var space = pretty || '';
      var html = '';
      $.each(obj, function(key, val) {
        if ($.isPlainObject(val)) {
          html += key + ': <br>';
          html += hrefLinks(val, space + '&nbsp;&nbsp;');
        } else if (key === 'href') {
          html += space + 'LINK: <a href="' + val + '">' + val + '</a><br>';
        } else {
          html += space + key + ': ' + val + '<br>';
        }
      });
      return html;
    }
    return {
      restrict: 'E',
      template: '<div></div>',
      replace: true,
      scope: {
        obj: '='
      },
      link: function(scope, element, attr) {
        element.html(hrefLinks(scope.obj));
      }
    };
  })

Then drop this in your HTML

<json-link obj="objWithLinks"></json-link>
morloch
  • 1,781
  • 1
  • 16
  • 23
  • That's close BUT I need to display all of the properties, not only href. By the way it doesn't work for some reasons..no error is thrown. – amenoire Apr 14 '14 at 12:56
  • The plnkr is broken or it's broken when you copy it across to your own code? I've also updated hrefLinks to print out everything. – morloch Apr 14 '14 at 22:16