Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 521
  • Last Modified:

Populate a form dropdown with JSON

Hi

I need to get data from a JSON file located in the root of my website. The data should them populate a dropdown menu.

The setup: ASP page with a form where there are 2 dropdown menu's. When the first changes i need a script that gets the corresponding values from the JSON file.

I have attached a sample JSON file. Imagine that the first dropdown has a selected value of "SAS".



{


"SAC": ["
{ "ddvalue":"8G","ddname":Agent"},"

"SAS": ["
{ "ddvalue":"BZ","ddname":Blizzard"},"
{ "ddvalue":"DY","ddname":Dynastar"},"
{ "ddvalue":"EL","ddname":Elan"},"
{ "ddvalue":"FI","ddname":Fischer"},"
{ "ddvalue":"HE","ddname":Head"},"
{ "ddvalue":"KS","ddname":Kästle"},"
{ "ddvalue":"LI","ddname":Line"},"
{ "ddvalue":"VL","ddname":Völkl"},"



"SBP": ["
{ "ddvalue":"PP","ddname":Pieps"},"


"SFA": ["
{ "ddvalue":"TT","ddname":Tatonka"},"



"SGO": ["
{ "ddvalue":"SY","ddname":Spy"},"

"SHE": ["
{ "ddvalue":"HE","ddname":Head"},"

"SHW": ["
{ "ddvalue":"21","ddname":2117"},"

"SJA": ["
{ "ddvalue":"21","ddname":2117"},"



"SPO": ["
{ "ddvalue":"LK","ddname":Leki"},"


"SSC": ["
{ "ddvalue":"CA","ddname":Cratoni"},"
{ "ddvalue":"PP","ddname":Pieps"},"

"SSO": ["
{ "ddvalue":"SP","ddname":Spyder"},"

"STA": ["
{ "ddvalue":"TT","ddname":Tatonka"},"

"STR": ["
{ "ddvalue":"21","ddname":2117"},"



"SUS": ["
{ "ddvalue":"21","ddname":2117"},"

"SUT": ["
{ "ddvalue":"21","ddname":2117"},"


}

Open in new window

0
kbnewgear
Asked:
kbnewgear
2 Solutions
 
leakim971PluritechnicianCommented:
Where's the HTML code for the two dropdown?
Please validate your JSON data here : http://jsonlint.com/
Currentlu it's not a valid JSON object!
0
 
Jagadishwor DulalBraces MediaCommented:
See here the example this is the html page please manage the jquery src file:

<html>
<head>
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.getJSON('mylist.json',function(data){
            console.log('success');
            $.each(data.employees,function(i,emp){
                $('select').append('<option value="'+emp.firstName+' '+emp.lastName+'">'+emp.firstName+' '+emp.lastName+'</option>');
            });
        }).error(function(){
            console.log('error');
        });
    });
</script>
</head>
<body>
    <select name="fullname">
    
    </select>
</body>
</html>

Open in new window


Now mylist.json file save it in the same folder to load:
{"employees" : [{"firstName":"Jagadish","lastName":"Dulal"},
    {"firstName":"John","lastName":"doe"},
    {"firstName":"Diwakar","lastName":"Shrestha"}
]}

Open in new window


Again see css tricks for reference:
http://css-tricks.com/dynamic-dropdowns/
0

Featured Post

[Webinar] Cloud and Mobile-First Strategy

Maybe you’ve fully adopted the cloud since the beginning. Or maybe you started with on-prem resources but are pursuing a “cloud and mobile first” strategy. Getting to that end state has its challenges. Discover how to build out a 100% cloud and mobile IT strategy in this webinar.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now