Rendering an HTML table from a JSON object without using jQuery

Question

I am trying to take a JSON object output from Watson and parse it into an HTML table that can be added to a string, which is being sent as an email. I tried using several plugins such as json2html, but could not seem to get any of them to work.

My JSON object looks like this:

 WATSON TONE: {
   "document_tone": {
     "tone_categories": [
       {
         "tones": [
           {
             "score": 0.15756,
             "tone_id": "anger",
             "tone_name": "Anger"
           },
           {
             "score": 0.192775,
             "tone_id": "disgust",
             "tone_name": "Disgust"
           },
           {
             "score": 0.186713,
             "tone_id": "fear",
             "tone_name": "Fear"
           },
           {
             "score": 0.255821,
             "tone_id": "joy",
             "tone_name": "Joy"
           },
           {
             "score": 0.207131,
             "tone_id": "sadness",
             "tone_name": "Sadness"
           }
         ],
         "category_id": "emotion_tone",
         "category_name": "Emotion Tone"
       },
       {
         "tones": [
           {
             "score": 0,
             "tone_id": "analytical",
             "tone_name": "Analytical"
           },
          {
             "score": 0,
             "tone_id": "confident",
             "tone_name": "Confident"
           },
           {
             "score": 0,
             "tone_id": "tentative",
             "tone_name": "Tentative"
           }
         ],
         "category_id": "writing_tone",
         "category_name": "Writing Tone"
       },
       {
         "tones": [
           {
             "score": 0.803,
             "tone_id": "openness_big5",
             "tone_name": "Openness"
           },
           {
             "score": 0.56,
             "tone_id": "conscientiousness_big5",
             "tone_name": "Conscientiousness"
           },
           {
             "score": 0.149,
             "tone_id": "extraversion_big5",
             "tone_name": "Extraversion"
           },
           {
             "score": 0.012,
             "tone_id": "agreeableness_big5",
             "tone_name": "Agreeableness"
           },
           {
             "score": 0.387,
             "tone_id": "neuroticism_big5",
             "tone_name": "Emotional Range"
           }
         ],
         "category_id": "social_tone",
         "category_name": "Social Tone"
       }
     ]
   }
 }

and I'm trying to append it within a string that looks like this.

emailText = '<html><body><h2>Original Email: </h2><p>' + watsonInput + '</p> <h2>Results: </h2><p>' + jsonOutput + ' </p></body></html>';

I'm a little lost here and have taken a look at several previous questions on SO, but could not figure it out based on previous answers, as many people suggest to use various jQuery Plugins.

Any help/suggestions are appreciated, Thanks

Answer 1

I've quickly made a crude example that shows you how to go about doing what you need. See below:

var json = '{ "watson_tone" : [' +
'{ "score": 0.1231 , "tone_id":"fear" },' +
'{ "score": 0.1235 , "tone_id":"sadness" },' +
'{ "score": 0.1236 , "tone_id":"disgust" } ]}';

// Parse the JSON so we can access what we need.
var parsed = JSON.parse(json);

// Get the amount of objects inside 'watson_tone' so we can loop through each one.
var count = Object.keys(parsed.watson_tone).length;

// Make some strings to include in our output.
var tableHeader = "<table><tr><th>score</th><th>tone_id</th></tr>";
var tableContent = "";

// Loop through the JSON and output each row in to a string.
for(i = 0; i < count; i++) {
    tableContent = tableContent + "<tr><td>" + parsed.watson_tone[i].score + "</td><td>" + parsed.watson_tone[i].tone_id + "</tr>";
}

var tableFooter = "</table>";

// Get div and output the HTML. You can include these HTML strings straight in to your emailText variable.
document.getElementById("your_table").innerHTML = tableHeader + tableContent + tableFooter;

So you receive your JSON, then you parse it.

Next you count it, prepare your HTML output and loop through each record in the JSON (as required) and append this to the output.

Now you have a variable (or variables) containing the HTML that you need.

Good luck!

Rendering an HTML table from a JSON object without using jQuery

Question

1 answers

solution1
2 ACCPTED 2016-02-19 20:36:08

Rendering an HTML table from a JSON object without using jQuery

Question

1 answers

solution1 2 ACCPTED 2016-02-19 20:36:08

solution1
2 ACCPTED 2016-02-19 20:36:08