Question

I have this function that I’m calling to retrieve some JSON data and use it to populate various parts of my page. The js is a separate JS file.

$(document).ready(function(){
$.getJSON('data.json', function(data) {

    var pg_title=data.metadata.title;
    $(document).ready(function (){
        document.title = pg_title;
        document.getElementById("page_title").innerHTML=pg_title;
    });

    for (var i in data.sections) {
        var section_title=data.sections[i].title;
        var section_content=data.sections[i].content;
        var section_id=data.sections[i].title;
            var lastChar = section_id.indexOf(' ');
        section_id = section_id.slice(0,lastChar).toLowerCase();
        document.getElementById("sections").innerHTML+="<h2 id='" + section_id + "'>" + section_title + "</h2>" + "<p>" + section_content + "</p>";
    }

});
});

And I call it from my HTML like such:

<script src="/design-library/js/getJSON.js" type="text/javascript"></script>

How do I edit the setup so I can either (a) use paired file names (e.g. cabinet.html & cabinet.json) or (b) just pass in the json file name to the function as a parameter from the HTML file?

Answer 1

Let’s say your page url is http://path/cabinet.html

In your script, you can get the page name with a regular expression:

var pageName = /\/(.+)\.html/.exec(window.location.href)[1];

(will return pageName=”cabinet”)

Then you can pass the page name to your function:

$.getJSON(pageName+'.json', function(data) {...