Как преобразовать данные 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?"
          }
        }
      ]
    }
  }
}

Ожидаемый результат: Привет, мир Как сделать онлайн-платеж Что такое хороший язык программы?

HTML-тег:

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

Спасибо за помощь.

Answer 1

Предполагая, что файл json исходит от внешнего API, я написал этот код. Обязательно измените URL-адрес функции getJSON() на URL-адрес вашего файла json:

$(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>`)
	})
})

Answer 2

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/