arrays - 如何将 JSON 数据转换为 HTML？

Question

我尝试编写有关 JSON 类型的代码，但我遇到了如何将数组从 JSON 更改为 HTML 的问题。

这是我从 JSON 中得到的：

{
  "data": {
    "posts": {
      "edges": [
        {
          "node": {
            "title": "Hello World"
          }
        },
        {
          "node": {
            "title": "How to do Online Payment"
          }
        },
        {
          "node": {
            "title": "What is good programme language?"
          }
        }
      ]
    }
  }
}

预期输出： Hello World 如何进行在线支付 什么是好的程序语言？

HTML标签：

 <div>
    <h1>Hello World</h1>
    <h1>How to do Online Payment</h1>
    <h1>What is good programme language?</h1>
 </div>

谢谢您的帮助。

Answer 1

json2html是一个开源的 javascript 库，它使用 JSON 模板将 JSON 对象转换为 HTML。

var transform = {'<>':'div','text':'${name} (${age})'};

var data = [ {'name':'Bob','age':40}, {'name':'Frank','age':15}, {'name':'Bill','age':65}, {'name':'Robert','age':24}]; document.write(json2html.transform(data,transform) );

如需更多帮助和文档，您可以访问 url

http://json2html.com/docs/

Answer 2

假设json文件来自外部api，我写了这段代码。请务必将getJSON()函数的 URL 更改为您的 json 文件的 url：

$(document).ready(() => {
$.getJSON('app.json')
	.then(data => {
		let array = data.data.posts.edges;
		let output = ''
		array.forEach(i => {
			output += `<h1>${i.node.title}</h1>`
		});
		$(document.body).append(`<div>${output}</div>`)
	})
})