How to fully create HTML from a js object?

Question

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:

The class, "card", links to the CSS, and I am not sure how to implement that with DOM.
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.
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!

Simpler and cleaner to store the date as an ISO date string rather than an object with individual properties. Can get those when you use Date API methods and pass in the iso string — charlietfl
– charlietfl, Commented Apr 8, 2019 at 2:51
Also more common to use array of objects where each element in array is one post — charlietfl
– charlietfl, Commented Apr 8, 2019 at 2:54

Alex Kudryashev · Accepted Answer · 2019-04-08 03:33:41Z

1

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>

answered Apr 8, 2019 at 3:33

Alex Kudryashev

9,5103 gold badges31 silver badges39 bronze badges

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

3 Comments

Malmadork Over a year ago

Thank you! This worked beautifully! I realized that this only allows for one paragraph, so I simply turned the 'text' variable from a string into an array, setting each element of the array to a string of each paragraph. I then inserted a for loop to add each paragraph as the post is made: for(n = 0; n < post.text.length; n +=1) { div.innerHTML += '<p>' + post.text[n] + '</p>'; }. This allows more versatility in creating as much or as little text as I want.

Malmadork Over a year ago

Is there any way I can use DOM to access an id after it is passed through the function? I tried using document.getElementById(); to access it, but wouldn't work. I am trying to use this to create a canvas element within my post . However, linking the canvas context to the tag by inserting "</p><canvas id='canvas'></canvas><p> before my text only created the element but the id could not be linked to. I also tried inserting it into the posting function to make the canvas tag whenever the index number is identified. Wondering if you knew how to link to the id with DOM as it didn't work before

Alex Kudryashev Over a year ago

var c = document.createElement('canvas'); c.id = 'myId'; div.appendChild(c);

Collectives™ on Stack Overflow

How to fully create HTML from a js object?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related