Selecting nested JSON objects and populating drop downs

Question

I have some JSON in the format like so:

"games": [{
    "gameType": "RPG",
    "publishers": [{
        "publisher": "Square",
        "titles": [{
            "title": "Final Fantasy",
            "gameReleases": [ 2006, 2008, 2010, 2012, 2013, 2014 ]
        }]
    }]
}]

I have a drop down which allows a user to select a game type and will populate another drop down menu. So if a user selects RPG from the drop down, the publisher drop down will show "Square", when the user selects Square, the titles drop down will show "Final Fantasy", when Final Fantasy is selected the range of dates will be selectable in the relevant drop down.

Currently my Game type drop down loads fine, the issue is with populating the subsequent drop downs. This is my code to populate the first drop down:

profileSelected: function () {
    var myUrl = "webapp/jsonaccount=" + accountcode;
    $.ajax({
        url: myUrl,
        type: "POST",
        dataType: "text",
        success: function(data) {
            var info = JSON.parse(data); //parse the returned data
            var getType = _.pluck(info.games, 'gameType'); //select the game types from the JSON
            var prepareType = _.map(getType, function(val){ return '<option>'+val + '</option>';}).join(); //create the to be added to the combobox

            $('select#gameTypeCombo').html(prepareType).selectpicker('render'); //render the box
            $('select#gameTypeCombo').selectpicker('refresh'); //refresh the box
            $('select#gameTypeCombo').on('change', function() { //when gameType is chosen do this
                //Populate publisher based on GameType: (select#publisher)
                // When publisher is selected populate Titles: (select#gameTypeCombo)
                // When titles is selected populate gameReleases: (select#releaseDates)
            })
        }
    })
}

My amendment was to add this to the change function to populate publisher (didn't get as far as titles as this didn't work to begin with):

$('select#gameTypeCombo').on('change', function() {
    var getPublisher = _.pluck(info.games.gameType, 'publisher');
    var preparePublisher = _.map(getPublisher, function(val){ return '<option>' + val + '</option>';}).join();  
    $('select#publisher').html (preparePublisher).selectpicker('render');                          
})

My first thought was that it was due to the fact it was within my AJAX request - which maybe isn't ideal but it was to pass the JSON through. But when i passed in game type again it worked.

So i think my issue is with the fact that publisher depends on title, and my code doesn't know which publisher to return. I looked into variables but didn't work, not sure where to go from here.

Any advice is appreciated.

--Edit--

I changed

var getPublisher = _.pluck(info.games[0].gameType, 'publisher');

So by adding [0] i actually get data returned, makes sense, however to start that's hard coded in, i want it to be variable depending on the previous drop down.

Pass the JSON data into the iterator function of map as well. That way, your inner function can handle the selection. I'll try writing up a formal answer in a while. — varagrawal
– varagrawal, Commented Apr 28, 2014 at 5:56

varagrawal · Accepted Answer · 2014-04-29 06:08:41Z

2

I have managed to solve your query.

It's all a bunch of nested .change() function calls after appropriately populating the data. If you need help understanding the helper functions, I'll add comments. :)

You can take a look here: JSFiddle

Excuse the poor formatting. You can copy the JS to your favourite text editor and verify what's being done. Hope it helps.

answered Apr 29, 2014 at 6:08

varagrawal

3,0423 gold badges29 silver badges39 bronze badges

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

Collectives™ on Stack Overflow

Selecting nested JSON objects and populating drop downs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related