從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

回答

相關問題