ajax вызов локального пользовательского файла JSON для создания карт Bootstrap 4 с использованием JS?

Question

Цель состоит в том, чтобы иметь страницу с начальной загрузкой 4 карт с изображением, заголовком, небольшим количеством текста и кнопкой «читать дальше». (По сути, это страница блога со списком сообщений блога).

Это должно быть сделано без сервера и полностью локально. Обслуживание не проблема, это персональный сайт.

---

Итак, мой мыслительный процесс:

• Иметь ручной JSON-файл, подобный следующему: (Хранится в /JSON/bloglist.json/)

  {
  articles: [
      {title: "blog article 1", url: "/blog/blog-article-1.html", image: "/images/blog/blog-article-1.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "b", "c"]},
      {title: "blog article 2", url: "/blog/blog-article-2.html", image: "/images/blog/blog-article-2.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a", "c"]},
      {title: "blog article 3", url: "/blog/blog-article-3.html", image: "/images/blog/blog-article-3.png", exerpt: "Lorem Ipsum blabla interesting preview to the site", tags: ["a"]},
  ]
  

  }

• Затем вызовите ajax-файл JSON

• Затем используйте javascript, возможно, с помощью Shuffle.JS, генерируйте карточки, которые можно фильтровать, искать и динамически загружать с помощью кнопки (Загрузить больше сообщений).

---

Из документации я могу понять, как загрузить больше из API, я также могу выяснить, как использовать Shuffle.JS для создания красивой сетки изображений.

Чего я не знаю, так это:

• Как использовать Shuffle.JS с Bootstrap 4 Cards

• Как использовать Ajax-вызов для вызова локального файла JSON

Answer 1

Может быть так:

$.getJSON('/JSON/bloglist.json/', function( data ) {
    for(var key in data.articles){
         var out='<div class="card">';
              out+='<div class="card-header">'+data.articles[key].title+'</div>';
              out+='<img class="card-img-top" src="'+data.articles[key].image+'" alt="...">';

               out+='<div class="card-body">';
               out+=data.articles[key].exerpt;
               out+='<div class="cls-for-load"></div>';
               out+='<button class="btn btn-primary" onclick="$(this).parent().find(\'.cls-for-load\').load( \''+data.articles[key].url+'\');">more...</button>';
               out+='</div>';
               out+=
            out+='</div>';
            $('body').append(out);
    }
});