title: ajax call to local custom JSON file to create Bootstrap 4 cards using JS?
body: <p>Goal is to have a page with bootstrap 4 cards with an image, title, a bit of text and a read more button. (Essentially a blog page with a list of blog posts).</p>
  
  <p>This has to be done with no server and fully local. Maintenance is not an issue this is a personal site.</p>
  
  <hr>
  
  <p>So my thought process is:</p>
  
  <ul>
  <li><p>Have a hand-made JSON file like this: (Stored in <code>/JSON/bloglist.json/</code>)</p>
  
  <pre><code>{
  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"]},
  ]
  </code></pre>
  
  <p>}</p></li>
  <li><p>Then have an ajax call the JSON file</p></li>
  <li><p>Then have javascript maybe using Shuffle.JS generate cards that can be filtered, searched and dynamically loaded with a (Load More Posts) button.</p></li>
  </ul>
  
  <hr>
  
  <p>From the documentation I can figure out how to load more from an API, I can also figure out how to use Shuffle.JS to create a nice grid of images. </p>
  
  <p>What I don't know is:</p>
  
  <ul>
  <li><p>How to use Shuffle.JS with Bootstrap 4 Cards</p></li>
  <li><p>How to use an Ajax call to call a local JSON file</p></li>
  </ul>