title: How do I output JSON columns in jQuery
body: <p>I'm using the qTip jQuery plugin to create dynamic tool tips. The tooltip sends an id to a cfc which runs a query and returns data in JSON format.</p>
  
  <p>At the moment, the tooltip loads with the following:</p>
  
  <pre><code>{"COLUMNS:" ["BOOKNAME","BOOKDESCRIPTION"["MYBOOK","MYDESC"]]} 
  </code></pre>
  
  <p>Here's the jQuery</p>
  
  <pre><code>$('#catalog a[href]').each(function()
  {
      var gi = parseInt($(this).attr("href").split("=")[1])
      $(this).qtip(
      {
          content: {
              url: 'cfcs/viewbooks.cfc?method=bookDetails',
              data: { bookID: gi  },
              method: 'get',
              title: {
                  text: $(this).text(),
                  button: 'Close'
              }
          },
          api :{
          onContentLoad : function(){
              }
          },
      });
  });
  </code></pre>
  
  <p>As I mentioned, the data is returned successfully, but I am unsure how to output it and format it with HTML.</p>
  
  <p>I tried adding <code>content: '&lt;p&gt;' + data.BOOKNAME</code> + '</p>' to api <code>:{ onContentLoad : function(){ .....</code> to see if I could get it to output something, but I get a 'data is undefined error'</p>
  
  <p>What is the correct way to try and output this data with HTML formatting?</p>