Dynamically Populate With Javascript



From JSON To Javascript To HTML

Writing HTML is boring, admit it! All we need is a simple snippet, some Javascript and obviously some data.

First we'll start off with a simple HTML file with jQuery included as we'll be using it later on (you don't have to if you don't want to). Save this as index.html in your project folder.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JSON THING</title>
</head>
<body>

  <div id="output"></div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="scripts.js"></scripts>
</body>

</html>

Next we'll build a simple JSON file with a list of website data. Save this as data.json.

{
  "websites": [{
    "title": "If It Wasn't For Those Damn Whelks",
    "desc": "Impshum Webcomic",
    "url": "https://impshum.co.uk"
  }, {
    "title": "Moar Than",
    "desc": "Everything",
    "url": "https://moarthan.co.uk"
  }, {
    "title": "Recycled Robot",
    "desc": "Web Developer",
    "url": "https://recycledrobot.co.uk"
  }]
}

Next we need to read this JSON and spew the data out into the HTML. Place your choice between jQuery or pure Javascript in scripts.js.

jQuery

$.getJSON(`data.json`, function(data) {
  $.each(data.websites, function(i, item) {
    var title = item.title;
    var desc = item.desc;
    var url = item.url;
    $('#output').append(`${title}<br>${desc}<br>${url}<hr>`);
  });
});

Javascript

var request = new XMLHttpRequest();
request.open('GET', 'data.json', true);

request.onload = function() {
  if (this.status >= 200 && this.status < 400) {
    var data = JSON.parse(this.response);

    for (i = 0; i < data.websites.length; i++) {
      title = data.websites[i].title;
      desc = data.websites[i].desc;
      url = data.websites[i].url;

      var el = document.getElementById('output'),
        elChild = document.createElement('div');
      elChild.innerHTML = title + '<br>' + desc + '<br>' + url + '<hr>';
      el.appendChild(elChild);
    }
  }
};

request.send();

Bulma time!

So... Let's make this thing work for us.

index.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>JSON THING</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.5/css/bulma.min.css">
</head>

<body>

  <section class="hero is-fullheight is-light">
    <div class="hero-body">
      <div class="container">
        <div id="output" class="columns has-text-centered is-centered is-multiline">
          <!-- WEBSITES -->
        </div>
      </div>
    </div>
  </section>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="scripts.js"></script>
</body>

</html>

scripts.js

$(function() {

  $.getJSON(`data.json`, function(data) {
    $.each(data.websites, function(i, item) {
      var title = item.title;
      var desc = item.desc;
      var url = item.url;
      $('#output').append(`
        <div class="column is-4">
          <a href="${url}">
            <div class="card">
              <div class="card-content">
                <h4 class="title is-size-5">${title}</h4>
                <p class="subtitle is-size-7">${desc}</p>
              </div>
            </div>
          </a>
        </div>
      `);
    });
  });

});

Thanks for reading. x

Resources