how to extract data from the json file to dropdownlist in html using ajax and java script

advertisements

I want to retrieve data from json file to two dropdownlist in html using ajax and java script, I want to retrive data in the first one dropdownlist then when I choose any option the data that relate to this option retrive to the second one dropdownlist

This is my json file:

{
    "beatles" : [{
            "name" : "Paul McCartney",
            "value" : "http://www.paulmccartney.com"
        }, {
            "name" : "John Lennon",
            "value" : "http://www.johnlennon.it"

        }, {
            "name" : "George Harrison",
            "value" : "http://www.georgeharrison.com"
        }, {
            "name" : "Ringo Starr",
            "value" : "http://www.ringostarr.com"
        }
    ],
    "stones" : [{
            "name" : "Mick Jagger",
            "value" : "http://www.mickjagger.com"
        }, {
            "name" : "Keith Richards",
            "value" : "http://www.keithrichards.com"
        }, {
            "name" : "Charlie Watts",
            "value" : "http://www.rosebudus.com/watts"
        }, {
            "name" : "Bill Wyman",
            "value" : "http://www.billwyman.com"
        }
    ],
    "genesis" : [{
            "name" : "Phil Collins",
            "value" : "http://www.philcollins.co.uk"
        }, {
            "name" : "Peter Gabriel",
            "value" : "http://www.petergabriel.com"

        }, {
            "name" : "Mike Rutherford",
            "value" : "http://www.mike-and-the-mechanics.co.uk"
        }
    ],
    "eagles" : [{
            "name" : "Don Henley",
            "value" : "http://www.donhenley.com"
        }, {
            "name" : "Joe Walsh",
            "value" : "http://www.joewalsh.com"

        }, {
            "name" : "Glenn Frey",
            "value" : "http://www.imdb.com/name/nm0004940"
        }
    ]
}

And this is my html file:

<!DOCTYPE html>
<head>

<meta charset='UTF-8'>

    <title>Dynamic Dropdown</title>

    <link rel='stylesheet' href='css/style.css'>

    <script>
        var xmlhttp = new XMLHttpRequest();
var url = "bands.json";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var myArr = JSON.parse(xmlhttp.responseText);
        myFunction(myArr);
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();

    </script>
</head>

<body>

    <div id="page-wrap">

        <h1>Pulls from JSON</h1>
        <pre>Band:</pre>
        <select id="brand">
            <option selected value="base">Please Select</option>
        </select>

        <br />
        <pre>Artist:</pre>
        <select id="artist">
            <option>Please choose from above</option>
        </select>

    </div>

</body>

</html>

I want the result to be like this:


<!DOCTYPE html>
<head>

<meta charset='UTF-8'>

<title>Dynamic Dropdown</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
    var jsonstr = '{'+
    '"beatles" : [{'+
    '        "name" : "Paul McCartney",'+
    '        "value" : "http://www.paulmccartney.com"'+
    '    }, {'+
    '        "name" : "John Lennon",'+
    '        "value" : "http://www.johnlennon.it"'+
''+
    '    }, {'+
    '        "name" : "George Harrison",'+
    '        "value" : "http://www.georgeharrison.com"'+
    '    }, {'+
    '        "name" : "Ringo Starr",'+
    '        "value" : "http://www.ringostarr.com"'+
    '    }'+
    '],'+
    '"stones" : [{'+
    '        "name" : "Mick Jagger",'+
    '        "value" : "http://www.mickjagger.com"'+
    '    }, {'+
    '        "name" : "Keith Richards",'+
    '        "value" : "http://www.keithrichards.com"'+
    '    }, {'+
    '        "name" : "Charlie Watts",'+
    '        "value" : "http://www.rosebudus.com/watts"'+
    '    }, {'+
    '        "name" : "Bill Wyman",'+
    '        "value" : "http://www.billwyman.com"'+
    '    }'+
    '],'+
    '"genesis" : [{'+
    '        "name" : "Phil Collins",'+
    '        "value" : "http://www.philcollins.co.uk"'+
    '    }, {'+
    '        "name" : "Peter Gabriel",'+
    '        "value" : "http://www.petergabriel.com"'+
''+
    '    }, {'+
    '        "name" : "Mike Rutherford",'+
    '        "value" : "http://www.mike-and-the-mechanics.co.uk"'+
    '    }'+
    '],'+
    '"eagles" : [{'+
    '        "name" : "Don Henley",'+
    '        "value" : "http://www.donhenley.com"'+
    '    }, {'+
    '        "name" : "Joe Walsh",'+
    '        "value" : "http://www.joewalsh.com"'+
''+
    '    }, {'+
    '        "name" : "Glenn Frey",'+
    '        "value" : "http://www.imdb.com/name/nm0004940"'+
    '    }'+
    ']'+
'}';
var _OBJ_ARR_SUB = [];
$(document).ready(function() {
    var m = document.getElementById('brand');
    var jsonobj = eval('(' + jsonstr + ')');
    m[1] = new Option('eagles',1);
    _OBJ_ARR_SUB[1] = jsonobj.eagles;
    m[2] = new Option('genesis',2);
    _OBJ_ARR_SUB[2] = jsonobj.genesis;
    m[3] = new Option('stones',3);
    _OBJ_ARR_SUB[3] = jsonobj.stones;
    m[4] = new Option('beatles',4);
    _OBJ_ARR_SUB[4] = jsonobj.beatles;
});

function change(){
    var bobj = document.getElementById('brand');
    var artist = document.getElementById('artist');
    var idx = bobj.value;
    var obj = _OBJ_ARR_SUB[idx];
    for (var i = 0; i < obj.length; i++) {
        var o = obj[i];
        artist[i+1] = new Option(o.name,o.value);

    };
}

</script>

</head>

<body>

<div id="page-wrap">

    <h1>Pulls from JSON</h1>
    <pre>Band:</pre>
    <select id="brand" onchange="change()">
        <option selected value="base">Please Select</option>
    </select>

    <br />
    <pre>Artist:</pre>
    <select id="artist">
        <option>Please choose from above</option>
    </select>

</div>

</body>

</html>