Javascript JSON Display data corresponding to option selected
Question
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 selection I want to display the corresponding related data. for example, if i select Mark from the option, the corresponding data "points": 13654,"color": "#DAF0FD","bullet": "3.gif" should be stored in an array or one more JSON object. At the end i need to plot the graph. I have around 1000 records.
<html>
<head>
<script type="text/javascript">
window.onload = function () {
select = document.getElementById("selector");
var lookup = {};
var items = chartData;
//alert(items)
for (var item, i = 0; item = items[i++];) {
var name = item.name;
if (!(name in lookup)) {
lookup[name]=1;
var option = document.createElement("option");
option.value = i+1;
option.textContent = name;
select.appendChild(option);
};
};
};
// note, each data item has "bullet" field.
var chartData = [{
"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": "Mark",
"points": 13654,
"color": "#DAF0FD",
"bullet": "3.gif"
}
{ "name": "Patrick", "points": 53421, "color": "#DB4C3C", "bullet": "2.gif" },{ "name": "Mark", "points": 12311, "color": "#DAF0FD", "bullet": "3.gif" }];
</script>
</head>
<body>
<div><select id="selector"><option value="99">Default</option></select></div>
<div id="chartdiv" style="width: 100%; height: 600px;"></div>
</body>
1 answers
solution1
0 2013-12-26 14:22:43
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))
})
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.