CODEWITHSUNDEEP
javascripthtmldom
Malmadork
Malmadork

Reputation: 257

How to fully create HTML from a js object?

I am working on finding a way to use javascript to create blog posts for my website. I am quite knowledgeable in javascript, however I haven't used many DOM elements other than document.getElementById(). I am looking for support in how to implement a way to turn a JS object into a post. Here is an example object: 

var posts = {     //My object

firstPost: {      //An example post
  index: 1,       //Identifies order of posts: 1 is oldest... >1 newest
  id: "first", //An id for the post
  date: {         //Date will be listed next to name on post
    month: 11,
    day: 2,
    year: 2018
  },
  name: "My Post",              //Name of the post
  text: "Text for the post...", //Actual Post
  image: 'blogImage.png'        //An image for the post
}

And now I want to pass it through a function as shown below to create HTML:

function assemblePost( index, id, month, day, year, text, image) {
   //DOM GOES IN HERE
}

Here is an example of how the HTML looks when I type it manually: 

<div class="card" id="first"> <!-- Card element links to css -->
    <h2>My Post</h2> <!-- Name of the post -->
    <h5>Posted November 2nd, 2018</h5> <!-- Date of the post -->
    <div class="img" style="height:200px;"><img src="/blogImage.png" ></div>
    <p>Text for the post..."</p> <!-- Actual Post -->
</div>

I am not entirely sure how to approach this because:

  1. The class, "card", links to the CSS, and I am not sure how to implement that with DOM.
  2. I am not sure if DOM can edit style, as in this example, the image height is 200, but in another image it could be different.
  3. For many of my other posts, I may have multiple paragraphs and/or lists. At the very least, I wanted a way to create one string of text. Maybe for lists, an array would be most useful in my object, however I am unsure how to address multiple paragraphs.

I realize it is a lot of explaining, examples, and guidelines, but I really do appreciate your help! Thank you!

Upvotes: 0

Views: 87

Answers (1)

Alex Kudryashev
Alex Kudryashev

Reputation: 9460

Just do it step by step.

var posts = [ //My object (array of posts)

  { //An example post
    index: 1, //Identifies order of posts: 1 is oldest... >1 newest
    id: "first", //An id for the post
    date: { //Date will be listed next to name on post
      month: 11,
      day: 2,
      year: 2018
    },
    name: "My Post", //Name of the post
    text: "Text for the post...", //Actual Post
    image: 'blogImage.png' //An image for the post
  },
  { //An example post
    index: 2, //Identifies order of posts: 1 is oldest... >1 newest
    id: "first", //An id for the post
    date: { //Date will be listed next to name on post
      month: 11,
      day: 2,
      year: 2018
    },
    name: "My another Post", //Name of the post
    text: "Text for another post...", //Actual Post
    image: 'blogImage.png' //An image for the post
  }
];
const container = document.getElementById('div-posts');
posts.forEach(function(post) {
  let div = document.createElement('div');
  div.className = 'card';
  div.id = 'post_' + post.index; //or post.id provided itis unique
  //create more elements instead of ".innerHTML" if you wish
  div.innerHTML = '<h2>' + post.name + '</h2>' +
    '<h5>' + (new Date(post.date.year, post.date.month, post.date.day).toDateString()) + '</h5>' +
    '<div class="img"><img src="/' + post.image + '" ></div>' +
    '<p>' + post.text + '</p>';
  container.appendChild(div);
});
.card {
  border: solid 1px #ccc;
  width: 400px
}

.img img {
  max-width: 100%
}
<div id="div-posts"></div>

Upvotes: 1

Related Questions