Pass json file name as parameter to external js file

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?

Not sure I understand. Are you looking to create a function that takes a dynamic url containing your JSON? — Kyle
– Kyle, Commented Dec 11, 2012 at 20:13
You have an extra $(document).ready() inside your callback that you don't need. — Evan Davis
– Evan Davis, Commented Dec 11, 2012 at 20:13
Kyle, yes, basically. Mathletics, thanks. I'm still new to getting all of this to work, especially crossing between jquery and javascript. — Mike Earley
– Mike Earley, Commented Dec 11, 2012 at 20:27

Kenci · Accepted Answer · 2012-12-11 20:14:09Z

You could wrap your code in a function, like this:

function SomeFunctionName(jsonName)
{
    $.getJSON(jsonName, 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 call it from your html like this:

  <script type="text/javascript"> 

 $(document).ready(function(){

    SomeFunctionName('data.json');

    });

</script>

Christophe · Accepted Answer · 2012-12-11 20:30:26Z

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) {...

edited Dec 11, 2012 at 20:30

answered Dec 11, 2012 at 20:24

Christophe

28.3k29 gold badges105 silver badges145 bronze badges

1 Comment

Mike Earley Over a year ago

There might be some recursion there, as I'm setting the title of the page using the script above.

Mike Earley · Accepted Answer · 2012-12-11 21:50:08Z

Ended up with this, based on Christophe's feedback. Thank you very much. Now--I couldn't get rid of the 2nd document.ready (.getJSON) because the function wouldn't execute if I did that.

$(document).ready(function () {
"use strict";
var pageName;
if (!pageName) {
    pageName = "index";
} else {
    pageName = /\/(.+)\.html/.exec(window.location.href);
}

$.getJSON(pageName + '.json', function (data) {
    var pg_title;
    pg_title = data.metadata.title;
    $(document).ready(function() {
        document.title = pg_title;
        document.getElementById("page_title").innerHTML = pg_title;
    });

    for (i in data.sections) {
        var section_title, section_content, section_id, lastChar, i;
        section_title = data.sections[i].title;
        section_content = data.sections[i].content;
        section_id = data.sections[i].title;
        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>";
    }
});
});

Collectives™ on Stack Overflow

Pass json file name as parameter to external js file

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related