Javascript JSON显示与所选选项对应的数据 [英] Javascript JSON Display data corresponding to option selected
问题描述
我试图根据选定的选项显示数据。以下是代码。 Dropbox中填充了 name =John，Damon，Patrick和Mark。现在根据选择我想显示相应的相关数据。例如，如果我从选项中选择Mark，相应的数据points：13654，color：＃DAF0FD，bullet：3.gif应该存储在一个数组或多个JSON对象中。最后，我需要绘制图表。
我有 1000 记录。
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
}];
{ "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>
推荐答案
以下是解决方案 jsfiddle ，我会建议使用一些像JQuery这样的东西来添加事件监听器，否则你需要在你的JS代码中单独处理IE。
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))
})
这篇关于Javascript JSON显示与所选选项对应的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
