How to convert JSON data to HTML?

Question

I tried to code about JSON types but I got stuck how to change array from JSON into HTML.

This is what I've got from JSON:

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

Expected output: Hello World How to do Online Payment What is good programme language?

HTML tag:

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

Thanks for the help.

score 1 · Answer 1 · answered May 12 '18 at 04:13

json2html is an open source javascript library that uses JSON templates to convert JSON objects into 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) );

for further help and documentation you can visit the url

http://json2html.com/docs/

score 0 · Answer 2 · answered May 13 '18 at 10:55

Assuming that the json file comes from an external api, I wrote this code. Be sure to change the URL of the getJSON() function to the url of the your json file:

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

How to convert JSON data to HTML?

2 Answers2