отображение данных с json на spa

Вот реализация перехода по страницам с помощью хэша:

    function getContent(fragmentId, callback) {
    var request = new XMLHttpRequest();
    request.onload = function() {
        callback(request.responseText); //
    };
    request.open("GET", fragmentId + ".html");
    request.send(null);
    }
    function setActiveLink(fragmentId) {
    var navbarDiv = document.getElementsByTagName("a"),
        links = navbarDiv,
        i, link, pageName;
    for (i = 0; i < links.length; i++) {
        link = links[i];
        pageName = link.getAttribute("href").substr(1);
        if (pageName === fragmentId) {
            link.setAttribute("class", "active");
        } else {
            link.removeAttribute("class");
        }
      }
     }
    function navigate() {
    var contentDiv = document.getElementById("content"),
    fragmentId = location.hash.substr(1);
    getContent(fragmentId, function(content) {
        contentDiv.innerHTML = content;
    });
    setActiveLink(fragmentId);
}
    if (!location.hash) {
    location.hash = "#home";
    }
    navigate();
    window.addEventListener("hashchange", navigate)

Необходимо вывести данные с json допустим на одну из страниц, пыталась использовать:

  var request = new XMLHttpRequest();
    request.open('GET', 'goods.json', true);
    request.onload = function() {
      if (request.status >= 200 && request.status < 400) {
        // Success!
        var data = JSON.parse(request.responseText);
        console.log(data);
      } else {
        // We reached our target server, but it returned an error
        console.log('error');
      }
    };
    request.onerror = function() {
      // There was a connection error of some sort
    };
    request.send();

Выводит только после перезагрузки выбранной страницы, подскажите, как можно это реализовать?