CODEWITHSUNDEEP
javascripthtmljavascript-objects
noob_ettan
noob_ettan

Reputation: 11

How to render object to html with pure javascript/jquery

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>

Upvotes: 1

Views: 1340

Answers (1)

Zsolt Meszaros
Zsolt Meszaros

Reputation: 23189

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>

Upvotes: 1

Related Questions