Opening json file in JavaScript

Question

I have a script for my website that populates dropdown menus and is running from a custom.js file. I pieced it together from tutorials and it works. I'm totally happy with it except for one thing. I have to embed the various levels of menu in the script. Just this one feature is 300 lines, almost all menu. I also would like to use the same information elsewhere so I've rewritten the various levels into a json file. All I want is to be able to open a json file there on the server and run it through this same logic. I feel like I'm close, looking into Ajax and jQuery but JavaScript is foreign to me but I just can't quite piece it together. I'm hoping someone can help me out or at least give me a nice hard shove in the right direction.

// Function auto populates dropdown menus. Takes in
// s1 and populates dropdown based on selection
function populatemenu(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "animal") {
        var optionArray = ["|",
                           "dog|Dog",
                           "cat|Cat",];
    } else if(s1.value == "vegetable") {
        var optionArray = ["|",
                           "carrots|Carrots",
                           "peas|Peas",];
    }   for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
    }
}

// I think this is close?
function populatesitetest(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    $(function(){
        $.getJSON("/menu_data.json", function(jsdata) {
        jsonObj = jsdata;
        console.log(jsonObj);
        });
    });
        var optionArray = jsonObj[s1.value]
        for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
    }

Álvaro Touzón · Accepted Answer · 2017-11-21 20:29:26Z

1

you need to work with data when ajax json is loaded, this is essencial to understan async data connection, change for this:

// s1 and populates dropdown based on selection

function populatemenu(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    if(s1.value == "animal") {
        var optionArray = ["|",
                           "dog|Dog",
                           "cat|Cat",];
    } else if(s1.value == "vegetable") {
        var optionArray = ["|",
                           "carrots|Carrots",
                           "peas|Peas",];
    }   for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
    }
}

// I think this is close?
function populatesitetest(s1, s2) {
    var s1 = document.getElementById(s1);
    var s2 = document.getElementById(s2);
    s2.innerHTML = "";
    $(function(){
        $.getJSON("/menu_data.json", function(jsdata) {
        jsonObj = jsdata;
        console.log(jsonObj);
 var optionArray = jsonObj[s1.value]
        for(var option in optionArray) {
            var pair = optionArray[option].split("|");
            var newOption = document.createElement("option");
            newOption.value = pair[0];
            newOption.innerHTML = pair[1];
            s2.options.add(newOption);
        }
        });
    });

    }

answered Nov 21, 2017 at 20:29

Álvaro Touzón

1,2301 gold badge8 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Steve B Over a year ago

Thank you. Not only did this work, but it got me close enough that I've been able to start modifying it for other purposes.

Collectives™ on Stack Overflow

Opening json file in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related