11

I went through this fiddle which have a sample of three dropdown with json data. I have a sample google spreadsheet here. Now is it possible to render this spreadsheet data to the example given at fiddle as json format. I know we can convert the spreadsheet to json as,

 var query = new google.visualization.Query('http://spreadsheets.google.com/tq?key=0AozvCNI02VmpdDkwR3RETmczbTI4ZFJhTXJkZHlUbEE#gid=0');
 query.send(handleQueryResponse);
 }
 function handleQueryResponse(response) {
    data = response.getDataTable();
    }

But using this the dropdown didn't works.

1 Answer 1

14

I'm not sure about the way you're doing it but it can be accomplished a different way. Please see this fiddle using your example data, and below for the code.

Basically you call the JSON data from your spreadsheet with the below HTML script tags.

<script src="http://spreadsheets.google.com/feeds/list/0An1-zUNFyMVLdEFEdVV3N2h1SUJOdTdKQXBfbGpNTGc/1/public/values?alt=json-in-script&amp;callback=importGSS"></script>

Please note I'm linking to a copy of your spreadsheet as it requires it to by published

Then the you can handle the data with the below script.

function importGSS(json){
    for(var i = 0; i < json.feed.entry.length; i++){
        var entry = json.feed.entry[i];
        $('#departments').append('<option>' + entry.gsx$subdivision.$t + '</option>');
        $('#subject').append('<option>' + entry.gsx$section.$t + '</option>');
        $('#services').append('<option>' + entry.gsx$station.$t + '</option>');
    }
}

You can obviously adapt to your own needs.

4
  • I require something similar. But also want iterlinking and unique values in dropdown.
    – mpsbhat
    Apr 29, 2013 at 4:34
  • I'm afraid without a greater detail of description I can't picture what you're after. My code above is pretty simple so I hope it gets you on the right track to achieving your goal
    – dev
    Apr 29, 2013 at 17:39
  • Please go trough this sample in which when selecting IT in 1st dropdown it shows its child in 2nd dropdown. Similarly, when selecting accounting, it shows its children and so on. But in that sample the data is hard coded json. But is it possible to create the same type of dropdown from Google spreadsheet data?
    – mpsbhat
    Apr 30, 2013 at 5:00
  • 1
    I see what you mean but I haven't got the time to write the exact code you need. To get what you want, I would do this by appending your first drop down options only if it doesn't already exist. Then appending the second drop down options with a class of the associated first drop down and like wise with the third options having a class of the associated second drop down option. Then set all the options in the second and third drop downs to be hidden. Then when an option is selected, those with the class of that option are then set to be visible. Hope that helps.
    – dev
    Apr 30, 2013 at 17:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.