从JSON对象呈现HTML表格而不使用jQuery

-2

我想从Watson获取JSON对象输出并将其解析为可添加到字符串中的HTML表格，该字符串作为电子邮件发送。我试过使用几个插件，如json2html，但似乎无法让他们任何工作。从JSON对象呈现HTML表格而不使用jQuery

我的JSON对象看起来是这样的：

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" 
     } 
    ] 
    } 
}

，我想，看起来像这样的字符串中添加它。

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

我有点失去了这里，并采取一看就那么几款前面的问题，但无法弄清楚基于以前的答案，因为很多人建议使用各种jQuery插件。

任何帮助/建议表示赞赏，感谢

来源

2016-02-19 bretth18

我迅速做了一个最原始的例子，告诉您如何去这样做，你需要什么。见下：

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;

所以你收到你的JSON，然后你解析它。

接下来，您要对它进行计数，准备HTML输出并循环遍历JSON中的每条记录（根据需要）并将其附加到输出中。

现在您有一个包含您需要的HTML的变量（或变量）。

祝你好运！

来源

2016-02-19 20:36:08 n9nome

也值得看看我们如何创建http://visualizer.json2html.com这将可视化任何json对象..代码是在github这里https://github.com/moappi/visualizer.json2html –

从JSON对象呈现HTML表格而不使用jQuery

回答

相关问题