How to render object to html with pure javascript/jquery

Question

How can I render JavaScript objects to HTML with pure JavaScript or jQuery?

data = {
  'this-is-title-123' : {
    title : 'this-is-title-123',
    content : 'Lorem ipsum dolor sit amet',
    date : '12.8.2009'
  },
  'this-is-title-456' : {
    title : 'this-is-title-456',
    content : 'the quick brown fox jumped',
    date : '18.2.2028'
  },
  'this-is-title-789' : {
    title : 'this-is-title-789',
    content : 'the jumped fox fell in a pit',
    date : '19.12.2020'
  }
}

I want to convert it to HTML like this:

<div>
  <h1>this-is-title-123</h1>
  <p>Lorem ipsum dolor sit amet</p>
  <p>12.8.2009</p>
</div>
<div>
  <h1>this-is-title-456</h1>
  <p>the quick brown fox jumped</p>
  <p>18.2.2028</p>
</div>
<div>
  <h1>this-is-title-789</h1>
  <p>the jumped fox fell in a pit</p>
  <p>19.12.2020</p>
</div>

<div> <h1>this-is-title-123</h1> <p>Lorem ipsum dolor sit amet</p> <p>12.8.2009</p> </div> <div> <h1>this-is-title-456</h1> <p>the quick brown fox jumped</p> <p>18.2.2028</p> </div> <div> <h1>this-is-title-789</h1> <p>the jumped fox fell in a pit</p> <p>19.12.2020</p> </div> this is what i want, sorry i dont know how to format text here, im new to stackoverflow, and i adde the desired output to question — noob_ettan
– noob_ettan, Commented Dec 16, 2020 at 14:46
welcome to SO, please go to stackoverflow.com/tour . SO is not a free code provider, you have to show some code you try first, and we try to help you to make it better — Mister Jojo
– Mister Jojo, Commented Dec 16, 2020 at 18:37

Mister Jojo · Accepted Answer · 2020-12-17 11:49:04Z

1

It can be as simple as iterating over the object values and updating the inner HTML.

const data = {
  'this-is-title-123': {
    title: 'this-is-title-123',
    content: 'Lorem ipsum dolor sit amet',
    date: '12.8.2009',
  },

  'this-is-title-456': {
    title: 'this-is-title-456',
    content: 'the quick brown fox jumped',
    date: '18.2.2028',
  },

  'this-is-title-789': {
    title: 'this-is-title-789',
    content: 'the jumped fox fell in a pit',
    date: '19.12.2020',
  },
};

const posts = Object.values(data).map(post => `
  <div>
    <h2>${post.title}</h2>
    <p>${post.content}</p>
    <time>${post.date}</time>
  </div>
`)

document.querySelector('#root').innerHTML = posts.join('\n');

body {
  font-family: sans-serif;
}

<div id="root"></div>

edited Dec 17, 2020 at 11:49

Mister Jojo

22.9k6 gold badges28 silver badges45 bronze badges

answered Dec 16, 2020 at 14:48

Zsolt Meszaros

23.3k19 gold badges60 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abdullah Alhariri Over a year ago

This does allow for XSS attack

Collectives™ on Stack Overflow

How to render object to html with pure javascript/jquery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related