Я пытаюсь найти лучший способ JSONify для набора повторяющегося HTML, который у меня есть.

У меня есть следующий фрагмент кода, который повторяется "n" раз.

<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>

Я хочу создать шаблон, что-то вроде этого (предложения приветствуются)

<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>

А затем динамически сгенерировать этот элемент на основе файла JSON. Содержимое JSON будет похоже на следующее:

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

Заранее благодарю за любую помощь!

2
CuriousDev 31 Дек 2017 в 08:04

2 ответа

Лучший ответ

Если ваш "шаблон" действительно фиксированный (без вариантов) и довольно простой, как то, что вы разместили ... {{ X0}} может вас заинтересовать.

Да ... Как упоминалось в комментариях, существуют библиотеки шаблонов. Вы тоже должны посмотреть. Но простой способ сделать это самостоятельно, используя только один метод jQuery, - это присвоить каждому «полю» вашего шаблона класс.

Затем заполните клон вашего шаблона имеющимися у вас jsons и добавьте его в документ.

Обратите внимание на класс «.template», который я добавил в ваш CSS, чтобы скрыть шаблон.

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 (обновлен с бесконечным прокрутка)

2
Louys Patrice Bessette 31 Дек 2017 в 18:10
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>

То же, что и Луис, но использовал цикл for..of, поскольку он чище.

1
John Kennedy 31 Дек 2017 в 07:15