I need to print divs and appending array contents inside of them in Javascript. How do i do that?

Question

I have a div like this

    <div id="news" class="col-sm-6 col-md-4 col-lg-4 pb-70">
  <div class="post-prev-img">
      <a href="blog-single-sidebar-right.html"><img src="images/blog/post-prev-1.jpg" alt="img"></a>
    </div>

    <div class="post-prev-title">
      <h3><a href="blog-single-sidebar-right.html">TIME FOR MINIMALISM</a></h3>
    </div>

    <div class="post-prev-info">
      JULE 10<span class="slash-divider">/</span><a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel">JOHN DOE</a>
    </div>

    <div class="post-prev-text">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.
    </div>

    <div class="post-prev-more-cont clearfix">
      <div class="post-prev-more left">
        <a href="blog-single-sidebar-right.html" class="blog-more">READ MORE</a>
      </div>
      <div class="right" >
        <a href="blog-single-sidebar-right.html#comments" class="post-prev-count"><span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span></a>
        <a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel" class="post-prev-count"><span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span></a>
        <a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
          <span aria-hidden="true" class="social_share"></span>
        </a>
        <ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#"><span aria-hidden="true" class="social_facebook"></span></a>
          </li>
          <li><a href="#"><span aria-hidden="true" class="social_twitter"></span></a></li>
          <li><a href="#"><span aria-hidden="true" class="social_dribbble"></span></a></li>
        </ul>
      </div>
    </div>
</div>

I need this to be my "skeleton" for my other divs. Now i want to make a for and append the content of my array inside of it and print every div inside an HTML page. How do i do that?

Thanks

In what manner do you want to append the content of the array? Please provide example or something. I believe it can be done. Just need a little clarification. There are too many divs. — rupindr, Nov 13 '17 at 15:04
I'm new in JS so i haven't tried anything yet. Anyway i was thinking about making an array of array with content of my divs. Then a foreach to append the content inside of them. Once did this i wanted to do another for , for the array lenght to print the divs. The problem is that i didon't figure out how to that yet. — McMazalf, Nov 13 '17 at 15:04
In which div do you want to append? using jQuery isn't hard. store the div in a variable -> var foo = $("#DivID") and then create elements -> var elem = document.createElement("p"); and append that element in the foo variable -> foo.append(elem); — Calvin Nunes, Nov 13 '17 at 15:05
@McMazalf do you want to do something like this? if array=[1,2,3]; desired output:
1
2
2
Did I get it right? — rupindr, Nov 13 '17 at 15:06
@RupinderSingh My question is about if i can make that. But i'm a newbie in JS that's why i'm asking how to do that. Thanks in advance — McMazalf, Nov 13 '17 at 15:06
@RupinderSingh actually i want to do an array of array. So array[news1[tiltle_of_news, description, date],news2[tiltle_of_news, description, date]]; Then append them in as many divs i need so i would make a foreach that make as many divs as his lenght. And for this i would need an object — McMazalf, Nov 13 '17 at 15:07
@McMazalf so like array=[[1,2],[4,5,6]] output=
1
2

4
5
6
something like this? — rupindr, Nov 13 '17 at 15:10

score 1 · Answer 1 · answered Nov 13 '17 at 15:14

1

Try jQuery templates. You write your HTML code inside script tags and in your JS code you can call them and use them as you wish:

<script id="bookTemplate" type="text/x-jQuery-tmpl">
<div>
<img src="BookPictures/${picture}" alt="" />
<h2>${title}</h2>
price: ${formatPrice(price)}
</div>
</script>

Usage:

$("#bookTemplate").tmpl(books).appendTo("#bookContainer");

answered Nov 13 '17 at 15:14

Jose Cordero

526
5
15

I'll try that! Thanks – McMazalf Nov 13 '17 at 15:18

score 1 · Accepted Answer · answered Nov 13 '17 at 15:25

You do this as follows,

make a template in your html and hide using css #template, make a div to show all the items that we are going to dynamically make #list

<div id="list">
</div>

<div id="template">
<div class="col-sm-6 col-md-4 col-lg-4 pb-70">
  <div class="post-prev-img">
      <a href="blog-single-sidebar-right.html"><img src="{{img}}"  alt="img"></a>
    </div>

    <div class="post-prev-title">
      <h3><a href="blog-single-sidebar-right.html">{{name}}</a></h3>
    </div>

    <div class="post-prev-info">
      JULE 10<span class="slash-divider">/</span><a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel">JOHN DOE</a>
    </div>

    <div class="post-prev-text">
     {{info}}
    </div>

    <div class="post-prev-more-cont clearfix">
      <div class="post-prev-more left">
        <a href="blog-single-sidebar-right.html" class="blog-more">READ MORE</a>
      </div>
      <div class="right" >
        <a href="blog-single-sidebar-right.html#comments" class="post-prev-count"><span aria-hidden="true" class="icon_comment_alt"></span><span class="icon-count">21</span></a>
        <a href="http://themeforest.net/user/abcgomel/portfolio?ref=abcgomel" class="post-prev-count"><span aria-hidden="true" class="icon_heart_alt"></span><span class="icon-count">53</span></a>
        <a href="#" class="post-prev-count dropdown-toggle" data-toggle="dropdown" aria-expanded="false" >
          <span aria-hidden="true" class="social_share"></span>
        </a>
        <ul class="social-menu dropdown-menu dropdown-menu-right" role="menu">
          <li><a href="#"><span aria-hidden="true" class="social_facebook"></span></a>
          </li>
          <li><a href="#"><span aria-hidden="true" class="social_twitter"></span></a></li>
          <li><a href="#"><span aria-hidden="true" class="social_dribbble"></span></a></li>
        </ul>
      </div>
    </div>
</div>
</div>

CSS to hide the template

#template {
  display: none;
}

Then make an array of all your needed object data circle it with a loop and replace the data holders.

Then insert the new html into the dom

var assets= [
{

name: "Time for JS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum.",
},
{

name: "Time for CSS",
img: "http://via.placeholder.com/350x150",
link: "",
info:"ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
},
{

name: "Time for HTML",
img: "http://via.placeholder.com/350x150",
link: "",
info:"consectetur adipisicing consectetur adipisicing elit. Recusandae, nostrum, cumque culpa provident aliquam commodi assumenda laudantium magnam illo nostrum .consectetur adipisicing",
}


];

var html=""

assets.forEach(buildTemplate);
document.getElementById("list").innerHTML=html;

function buildTemplate(item) {
var template = document.getElementById("template").innerHTML;
template = template.replace("{{name}}", item.name);
template = template.replace("{{info}}", item.info);
template = template.replace("{{img}}", item.img);
html+=template;
}

Here it is in action, it's that simple no jquery ultra fast hardcode JS.

https://jsfiddle.net/5yeh38LL/

There is a much easier way use a js template engine there are lots on google but this demonstrates how this is done and how effectively a template system will work.

I could of given you a two line template engine solution. But, this kind of stuff is priceless you can learn so much coolness and that will help you build better apps using new tricks and techniques you learn from this simple stuff. Using jquery or an easier route eliminates learning. Best of luck, do look at JS template engines they are super cool. — MartinWebb, Nov 13 '17 at 15:34
Martin can you please explain what this line does html+=template; Thanks. It works like charm — McMazalf, Nov 13 '17 at 15:49
+= is a short way of saying html = html + template, we are adding the new template item to the html string which builds the list of items. — MartinWebb, Nov 13 '17 at 15:57
To print only 3 (assuming you have more than 3) you would need to exit the forEach loop on the third iteration there is an answer here that explains various ways of doing that https://stackoverflow.com/questions/2641347/how-to-short-circuit-array-foreach-like-calling-break — MartinWebb, Nov 13 '17 at 16:00
Thank you very much for your time and kindness. Hope the best for people like you! — McMazalf, Nov 13 '17 at 16:08

I need to print divs and appending array contents inside of them in Javascript. How do i do that?

2 Answers2