Convert JSON Array to HTML wrapped String - Angular Service

Question

I'm trying to use a wysiwyg in my angular app. What I want to happen is, I query an end point for an array of objects. Then based on the property name the data inside it gets wrapped into a different html tag. Then all the data is concatenated into a string which gets displayed on a wysiwyg in my app.

So JSON that looks like

[   
    {
    "name": "steve",
    "age": 33,
    "profile": "http://www.profile.com/steve",
    "location": "New York"
    },{
    "name": "john",
    "age": 25,
    "profile": "http://www.profile.com/john",
    "location": "LA"
    },
]

Spits out:

"<b>Steve - New York</b>
<br>
<a href='http://www.profile.com/steve'>Url</a>
<br>
<span>33</span>
<br>
<br>

<b>John - LA</b>
<br>
<a href='http://www.profile.com/john'>Url</a>
<br>
<span>25</span>
<br>
<br>"

While this part isn't Angular specific. I think I need to add this code into a service so that it can be reused whenever I would need it an an app.

I'm not sure what this code would look like. Any ideas?

EDIT: For clarification the reason why I'm doing this is because the page has a WYSIWYG on it. A non-technical user needs to be able to edit the data in the WYSIWYG then click a button and the app exports a PDF. The WYSIWYG requires a single string with HTML tags as does the backend of the app which generates the PDF file.

Answer 1

It seems to me that there's really no reason to reinvent the wheel here... why can't you just use a fully supported WYSIWYG editor like TinyMCE? It's got an angular extension through the Angular-UI project here:

https://github.com/angular-ui/ui-tinymce

Then you could write this in your html:

<textarea ui-tinymce="tinyMceOptions" ng-model="parsedResponse"></textarea>
<button ng-click="convertToPdf()">Y U NO DOWNLOAD PDF?</button>

In your controller (or directive):

$scope.tinyMceOptions = {/*Customize here*/};

$scope.parseMyResponse = function(data) {
  // do something with data and return as html string
  return data;
};

$http.get('/your/resource/url').success(function(result) {
  $scope.parsedResponse = $scope.parseMyResponse(result);
});

$scope.convertToPdf = function() {
  // do something with $scope.parsedResponse here to get a PDF
};

Edit: I guess I didn't get what you were asking exactly at first? If you want it in a service all you have to do is something like:

angular.module('app')
  .service('Util', function() {
    return {

      wrapInTag: function(tagName, value) {
        return '<' + tagName + '>' + value + '<' + tagName + '/>';
      },

      parseMyResource: function(response) {
        htmlString = '';
        angular.each(response, function(item) {
          htmlString += this.wrapInTag('h1', item.title);
          htmlString += this.wrapInTag('b', item.id);
          // Other manipulation...
        });
        return htmlString;
      }

    };
  });

Then in your controller:

angular.module('app')
  .controller('MyCtrl', function(Util){
    // Use Util functions here...
  });

I've given you some example code for parsing JSON into HTML strings, but I'm afraid I couldn't be more specific as to how to write it. The logic if your parsing function really depends on what you're trying to accomplish as well as what your data model looks like. There's really no straight-forward way to convert JSON to HTML.