如何将 JSON 数据转换为 HTML？答案

【问题标题】：How to convert JSON data to HTML?如何将 JSON 数据转换为 HTML？
【发布时间】：2018-05-12 04:05:14
【问题描述】：

我尝试编写有关 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?"
          }
        }
      ]
    }
  }
}

预期输出： 你好世界如何进行网上支付什么是好的程序语言？

HTML 标签：

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

感谢您的帮助。

【问题讨论】：

你的代码在哪里？

标签： arrays json arraylist jsonencoder

【解决方案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) );

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

http://json2html.com/docs/

【讨论】：

【解决方案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>`)
	})
})

【讨论】：