Javascript Json Display Data Corresponding To Option Selected

I am trying to display data depending on the selected option. Below is the code. The dropbox is populated with name = 'John','Damon','Patrick' and 'Mark'. Now depending on the sele

Solution 1:

Here is the solution jsfiddle, I would suggest using some thing like JQuery to add event listeners, otherwise you need to handle IE separately in your JS code. I have used underscore for data manipulations.

       // note, each data item has "bullet" field.
var chartData = [{
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
}, {
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
},{
    "name": "John",
        "points": 35654,
        "color": "#7F8DA9",
        "bullet": "0.gif"
},{
    "name": "Damon",
        "points": 65456,
        "color": "#FEC514",
        "bullet": "1.gif"
}, {
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
},{
    "name": "Patrick",
        "points": 45724,
        "color": "#DB4C3C",
        "bullet": "2.gif"
}, {
    "name": "Mark",
        "points": 13654,
        "color": "#DAF0FD",
        "bullet": "3.gif"
}];


var select = document.getElementById("selector");
var lookup = {};


var uniqNames = _.unique(_.pluck(chartData, 'name'));
var len = uniqNames.length;

//alert(items)
for (var i = 0; i < len; i++) {
    var name = uniqNames[i];
    var option = document.createElement("option");
    option.value = name;
    option.textContent = name;
    select.appendChild(option);
};


select.addEventListener('change', function () {
    var selValue = select.options[select.selectedIndex].value;

    if (selValue === 'None') {
        return;
    }
    var selectedOptions = _.where(chartData, {name:selValue})
    alert(JSON.stringify(selectedOptions))

})