Javascript JSON 显示与所选选项对应的数据答案

【问题标题】：Javascript JSON Display data corresponding to option selectedJavascript JSON 显示与所选选项对应的数据
【发布时间】：2013-12-28 13:10:08
【问题描述】：

我正在尝试根据所选选项显示数据。下面是代码。保管箱中填充有name = "John","Damon","Patrick" and "Mark"。现在根据选择我要显示相应的相关数据。例如，如果我从选项中选择标记，则相应的数据"points": 13654,"color": "#DAF0FD","bullet": "3.gif" 应该存储在一个数组或一个更多 JSON 对象中。最后我需要绘制图表。我有大约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"
    }

{ “名称”：“帕特里克”， “积分”：53421， "颜色": "#DB4C3C", “子弹”：“2.gif” },{ “名称”：“标记”， “积分”：12311， "颜色": "#DAF0FD", “子弹”：“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>

【问题讨论】：

标签： javascript jquery html json

【解决方案1】：

这里是jsfiddle的解决方案，我建议使用JQuery之类的东西来添加事件监听器，否则你需要在你的JS代码中单独处理IE。我使用下划线进行数据操作。

       // 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))

})

【讨论】：

谢谢，但正如我所提到的，我有大约 1000 个数据点，例如： John 有 50 条记录 "name": "John", "points": 35654, "color": " #7F8DA9”、“bullet”：“0.gif”}、“name”：“John”、“points”：6786、“color”：“#7F8DA9”、“bullet”：“0.gif”}等，所以我需要检索所有数据
更新答案，使用下划线库进行数据操作。