CODEWITHSUNDEEP
javascriptjqueryhtmlcssjson
CuriousDev
CuriousDev

Reputation: 1275

Fill HTML elements with JSON

I am trying to figure out the best way to JSONify a set of repeated HTML that I have with me.

I have the following piece of code that gets repeated for "n" number of times.

<article class="style2">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <a href="http://www.google.com">
                <div class="article-thumb">
                    <img src="https://place-hold.it/370x231/5" class="img-responsive" alt=""/>
                </div>
            </a>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="post-excerpt">

                <h3><a href="http://www.google.com">This is my first article</a></h3>
                <div class="meta">
                    <span>by <a href="#" class="link">Benjamin K.</a></span>
                    <span>on Sep 23, 2016</span>
                    <span class="comment"><i class="fa fa-comment-o"></i> 1</span>
                </div>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                <a href="http://www.google.com" class="small-title rmore">Read More</a>
            </div>
        </div>
    </div>
</article>

I want to create a template, something like this (suggestions welcome)

<article class="style2">
    <div class="row">
        <div class="col-md-6 col-sm-6">
            <a href="">
                <div class="article-thumb">
                    <img src="" class="img-responsive" alt=""/>
                </div>
            </a>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="post-excerpt">

                <h3><a href=""></a></h3>
                <div class="meta">
                    <span>by <a href="" class="link"></a></span>
                    <span></span>
                    <span class="comment"><i class="fa fa-comment-o"></i> </span>
                </div>
                <p></p>
                <a href="" class="small-title rmore">Read More</a>
            </div>
        </div>
    </div>
</article>

and then dynamically generate this element based on a JSON file. The contents of the JSON will be similar to the following:

url = http://www.google.com
image = https://place-hold.it/370x231/5
title = This is my first article
author = Benjamin K.
date = Sep 23, 2016
abstract = Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
comments = 1

CodePen https://codepen.io/iwant2learn/pen/PEmBMN

Thanks in advance for any help!

Upvotes: 2

Views: 130

Answers (2)

Louys Patrice Bessette
Louys Patrice Bessette

Reputation: 33933

If your "template" really is fixed (no variants) and quite simple as what you posted... The .clone() method may be an interest for you.

Yes... As mentionned in comments, there is templating libs that exist. You should also look. But a simple way to do it by yourself, using just one jQuery method, is to give each of your template "field" a class.

Then populate a clone of your template with the jsons you have and append it to the document.

Notice the ".template" class I added in your CSS to hide the template.

var myJSONarray = [
  {
    url : "http://www.google.com",
    image : "https://place-hold.it/370x231/5",
    title : "This is my first article",
    author : "Benjamin K.",
    date : "Sep 23, 2016",
    abstract : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
    comments : 1
  },{
    url : "https://learn.jquery.com/",
    image : "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
    title : "This is my first script!!!",
    author : "J. Q. Harry",
    date : "Dec 31, 2017",
    abstract : "You can do what you want, if you are a bit creative, my friend.",
    comments : 172
  }
];

$(document).ready(function(){

  for(i=0;i<myJSONarray.length;i++){

    var clone = $(".template").clone();
    clone.find(".template-url").attr("href",myJSONarray[i].url);
    clone.find(".template-title").find("a").html(myJSONarray[i].title);
    clone.find(".template-image").attr("src",myJSONarray[i].image);
    clone.find(".template-author").html(myJSONarray[i].author);
    clone.find(".template-date").html(myJSONarray[i].date);
    clone.find(".template-abstract").html(myJSONarray[i].abstract);
    clone.find(".template-comment").html('<i class="fa fa-comment-o"></i> '+myJSONarray[i].comments);
    clone.removeClass("template");

    $(".template-spot").append(clone);
  }
});
.template{
  display:none;
}
.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.inner-content {
  padding: 50px 0 57px;
}

.container {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.section-head {
  margin-bottom: 22px;
}

.section-head h2 {
  font-weight: 300;
}

article.style2 {
  padding-bottom: 30px;
  margin-bottom: 30px;
}

article {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

article .article-thumb {
  position: relative;
  overflow: hidden;
  background: #fff;
}

article:hover .article-thumb {
  background: #000;
}

article .article-thumb img {
  width: 100%;
}

article .article-thumb img {
}

article .article-thumb:hover img {
}

article .post-excerpt {
  padding: 9px 0;
}

article .meta {
  margin-top: 2px;
}

.meta span {
  font-size: 14px;
  color: #787878;
}


a.link:hover, a {
  color: #333;
}

a.link, a:hover {
  color: #33ccff;
}

.small-title {
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: bold;
  line-height: 18px;
  color: #333333;
  margin-bottom: 5px;
  text-transform: uppercase;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="wrapper">

  <div class="inner-content">
    <div class="container">
      <div class="section-head">
        <h2>Latest Bits</h2>
      </div>

      <div class="row">
        <div class="col-md-8 template-spot">

          <article class="style2 template">
            <div class="row">
              <div class="col-md-6 col-sm-6">
                <a href="http://www.google.com" class="template-url">
                  <div class="article-thumb">
                    <img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt=""/>
                  </div>
                </a>
              </div>
              <div class="col-md-6 col-sm-6">
                <div class="post-excerpt">

                  <h3 class="template-title"><a href="http://www.google.com" class="template-url">This is my first article</a></h3>
                  <div class="meta">
                    <span>by <a href="#" class="link template-author">Benjamin K.</a></span>
                    <span class="template-date">on Sep 23, 2016</span>
                    <span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
                  </div>
                  <p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                  <a href="http://www.google.com" class="small-title rmore">Read More</a>
                </div>
              </div>
            </div>
          </article>
		
        </div>

      </div>
    </div>
  </div>
</div>

CodePen (Updated with an infinite scroll)

Upvotes: 2

codejockie
codejockie

Reputation: 10844

var myJSONArray = [{
  url: "http://www.google.com",
  image: "https://place-hold.it/370x231/5",
  title: "This is my first article",
  author: "Benjamin K.",
  date: "Sep 23, 2016",
  abstract: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco",
  comments: 1
}, {
  url: "https://learn.jquery.com/",
  image: "http://www.desartlab.com/wp-content/uploads/2015/10/jquery_logo.gif",
  title: "This is my first script!!!",
  author: "J. Q. Harry",
  date: "Dec 31, 2017",
  abstract: "You can do what you want, if you are a bit creative, my friend.",
  comments: 172
}];

$(document).ready(function() {

  for (const val of myJSONArray) {
    var clone = $(".template").clone();
    clone.find(".template-url").attr("href", val.url);
    clone.find(".template-title").find("a").html(val.title);
    clone.find(".template-image").attr("src", val.image);
    clone.find(".template-author").html(val.author);
    clone.find(".template-date").html(val.date);
    clone.find(".template-abstract").html(val.abstract);
    clone.find(".template-comment").html(`<i class="fa fa-comment-o"></i> ${val.comments}`);
    clone.removeClass("template");

    $(".template-spot").append(clone);
  }
});
.template {
  display: none;
}

.wrapper {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.inner-content {
  padding: 50px 0 57px;
}

.container {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.section-head {
  margin-bottom: 22px;
}

.section-head h2 {
  font-weight: 300;
}

article.style2 {
  padding-bottom: 30px;
  margin-bottom: 30px;
}

article {
  border-bottom: 1px solid #eeeeee;
  padding-bottom: 15px;
  margin-bottom: 30px;
}

article .article-thumb {
  position: relative;
  overflow: hidden;
  background: #fff;
}

article:hover .article-thumb {
  background: #000;
}

article .article-thumb img {
  width: 100%;
}

article .article-thumb img {}

article .article-thumb:hover img {}

article .post-excerpt {
  padding: 9px 0;
}

article .meta {
  margin-top: 2px;
}

.meta span {
  font-size: 14px;
  color: #787878;
}

a.link:hover,
a {
  color: #333;
}

a.link,
a:hover {
  color: #33ccff;
}

.small-title {
  font-size: 10px;
  letter-spacing: 0.10em;
  font-weight: bold;
  line-height: 18px;
  color: #333333;
  margin-bottom: 5px;
  text-transform: uppercase;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">

  <div class="inner-content">
    <div class="container">
      <div class="section-head">
        <h2>Latest Bits</h2>
      </div>

      <div class="row">
        <div class="col-md-8 template-spot">

          <article class="style2 template">
            <div class="row">
              <div class="col-md-6 col-sm-6">
                <a href="http://www.google.com" class="template-url">
                  <div class="article-thumb">
                    <img src="https://place-hold.it/370x231/5" class="img-responsive template-image" alt="" />
                  </div>
                </a>
              </div>
              <div class="col-md-6 col-sm-6">
                <div class="post-excerpt">

                  <h3 class="template-title"><a href="http://www.google.com" class="template-url">This is my first article</a></h3>
                  <div class="meta">
                    <span>by <a href="#" class="link template-author">Benjamin K.</a></span>
                    <span class="template-date">on Sep 23, 2016</span>
                    <span class="comment template-comment"><i class="fa fa-comment-o"></i> 1</span>
                  </div>
                  <p class="template-abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco</p>
                  <a href="http://www.google.com" class="small-title rmore">Read More</a>
                </div>
              </div>
            </div>
          </article>

        </div>

      </div>

Same as what Louys did but used for..of loop as it's cleaner.

Upvotes: 1

Related Questions