How To Dynamically Reveal Json Data On Click From An Api?

I have data from a Tumblr API that I've successfully parsed, until I introduced tags within the body description. (This includes images, hyperlinks, etc) What I'm essentially doing

Solution 1:

Instead of storing the data in the "data-" attribute of the HTMLDivElement, just keep a reference to JSON response from the API in your javascript and store an index or id in the "data-" attribute (possibly "data-post-id")

var blogData = [{Title: .., Description: ...}, ...]; //Data from JSON Response

...
...

$('<div class = "title-list" data-post-id =' + postId +'>' + title + '</div>').appendTo(monthblogList);

...
...    

function showBlogEntry(element){
      var id = $(element).data('post-id')
      var close = $('<span id = close> x </span>')

      blogEntry.empty()

      $(close).appendTo(blogEntry)
      $('<h3>' + blogData[id].Title + '</h3>').appendTo(blogEntry)
      $(blogData[id].Description).appendTo(blogEntry)

      $("#close").on("click", function (event) {
        blogEntry.empty()
        about.fadeIn()
      });
    }