如何從類似 json 的字符串中渲染 html？

Question

這是來自服務器的響應的一部分

{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}

我正在研究的頁面呈現這樣

那是什么類型的標簽/語言？

如何解析和呈現該源？

Answer 1

您可以使用JSON.parse來解析您的數據並刪除所有不需要的斜杠。 您的回復目前是字符串格式。

您還可以訪問需要使用的 object . 你得到那個鍵的值。 在你的情況下，它的Vocabulary

1. 要顯示文本Vocabulary我們可以使用textContent()
2. 要將您的響應的字體大小應用於單詞，我們可以使用element.style.fontSize
3. 要將您的回復顏色應用於單詞，我們可以使用element.style.color

運行下面的代碼段。

 //Your response in string format let response = '{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}' //Parse data let parsedData = JSON.parse(response) //Show text on div using querySelector let element = document.querySelector('#data') //Apply response data to your Vocabulary: element.textContent = parsedData.insert; element.style.fontSize = parsedData.attributes.size; element.style.color = parsedData.attributes.color; //Console log console.log(parsedData)

 <div id="data"></div>

Answer 2

這是JSON數據的字符串化格式。 所以你需要解析它。

 console.log( JSON.parse( '{\"attributes\":{\"size\":\"18px\",\"color\":\"#3ba0dc\"},\"insert\":\"Vocabulary:\"}' ) );