如何从类似 json 的字符串中渲染 html？

Question

This is part of the response from a server

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

the page I'm studying renders it like this

What type of tag/language is that?

How do I parse and render that source?

Answer 1

You can use JSON.parse to parse your data and remove all the unwanted slashes. Your response is in string format at current.

Also you access the object you need to use . you get the value of that key. In your case its Vocabulary

1. To show the text Vocabulary We can use textContent()
2. To apply font size of your response to the word we can use element.style.fontSize
3. To apply color of your response to the word we can use element.style.color

Run snippet below.

 //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

This is stringify format of JSON data. so you need to parse it.

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