[英]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"
. 下拉框填充了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. 例如,如果我从选项中选择“标记”,则应将相应的数据"points": 13654,"color": "#DAF0FD","bullet": "3.gif"
存储在数组或另一个JSON对象中。 At the end i need to plot the graph. 最后,我需要绘制图形。 I have around 1000
records. 我有大约1000
条记录。
<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" }]; {“名称”:“ Patrick”,“点”:53421,“颜色”:“#DB4C3C”,“项目符号”:“ 2.gif”},{“名称”:“标记”,“点”: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>
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. 这是解决方案jsfiddle ,我建议使用JQuery之类的东西来添加事件侦听器,否则,您需要在JS代码中单独处理IE。 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))
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.