将点击元素的 ID 与 json 中的键匹配答案

【问题标题】：Match ID of clicked element to key in json将点击元素的 ID 与 json 中的键匹配
【发布时间】：2014-10-29 18:57:55
【问题描述】：

我正在为交互式美国地图进行概念验证。当用户单击状态形状时，有关该特定状态的文本信息应出现在地图下方的 div 中。我有一个包含两个 SVG 形状的 html 文件、一个 JS 文件和一个当前包含一个数组的 JSON 文件。我希望这张地图如何工作：当用户单击形状时，形状的 ID 将传递给 getJSON 函数，其键/索引与该 ID 匹配的对象将是从 JSON 中检索到的唯一对象，最终显示在地图下方的 div 中。

目前，在我的 getJSON 函数中，我使用 $.each(data.items, function(key, val)，但问题是控制台显示键实际上是数组的索引在我的 JSON 文件中。在我的项目的先前版本中，我使用键（不带数组）将 JSON 格式化为普通对象格式。我使用 .html() 和 .append() 返回其键与形状 ID 匹配的对象; 但是，问题在于我必须在下面的 val.state 之前的“fl”中硬编码：

$("#txtDOT").html("<p id='state " + key + "'>" + val.state + "'</p>")//quotes fixed

我很纠结是否要在我的 JSON 中包含该数组。请告知如何将单击的形状的 ID 传递给 getJSON 函数，以及如何将其键或索引与形状的 ID 匹配的特定对象归零。我的代码的当前版本如下：

显示一种状态形状和脚本标签的 HTML：

<div class="svg-container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 width="546.411px" height="328.782px" viewBox="0 0 546.411 328.782" style="enable-background:new 0 0 546.411 328.782;"
 xml:space="preserve" class="svg-content">
<g id="fl" data-key="fl">
    <polygon id="flPolygon" style="fill:#3E7AAC;stroke:#1A171B;stroke-width:0.5;stroke-miterlimit:10;" points="406.029,254.818..."/>
    <text id="flLetters" transform="matrix(1.0127 0 0 1 443.8125 272.377)" style="fill:#3E7AAC;stroke:#1A171B;stroke-width:0.5;stroke-miterlimit:10; font-family:'ArialMT'; font-size:6.19;">FL</text>
    </g>
</svg>
</div>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="exploreMap.js"></script>

JS 全部：

$(document).ready(function(){

   var items = [];

   $.getJSON("stateInfoList.json", function( data ) {
        console.log ( data );//whole JSON object

      $("g").on("click", function (e) {
        console.log(this.id);
        var $e = $(e.currentTarget);//target should be clicked shape but I can't tell yet
        //clicked.css("background", "blue");//clicked is not defined yet


        $.each ( data.items, function( key, val ){
          console.log ( key, val );//key is "01", val is whats inside json's { }s

          items.push( "<p id='state " + key + "'>" + val.state + "<p id='contacts'>" + val.contacts + "'</p></p>");
           console.log( "<p id='state " + key + "'>" + val.state + "<p id='contacts'>" + val.contacts + "'</p></p>");

              //add all <p> items to a <ul>
              $( "<ul>", { //later, style="display:none";>
                    "class": "my-new-list",

                     html: items.join( "" ) //this joins all or **selected element(s)** back into a ~nonformatted~ string.//join method only works with arrays, not jquery objects.

              }).appendTo( "#txtDOT" );//

                //jQuery Selector $() function w optional 2nd parameter to do a search within an event handler
                $("p").on("click", function (e) {//Using e is just a short for event. You can pass any variable name you desire.
                    var $e = $(e.target);//target is #txtDOT
                    clicked.css("background", "red");
                });

        });                         

      });

   });

});

//If I use plain object instead of array, this might work:
//$("#txtDOT").html("<p id='state " + key + "'>" + val.state + "'</p>"); 
//$("#txtDOT").append("<p id='contacts'>" + val.contacts + "'</p>");

JSON 全部：

{
  "items": [

    {
    "abv": "nh",
    "state": "NEW HAMPSHIRE DEPARTMENT OF TRANSPORTATION",
    "contacts": "Concrete Admixtures (CADD) \nBob Real, Research Supervisor/QPL, 555-555-5555, breal@dot.state.nh.us \n\nConcrete Curing Compounds (CCC) \nBob Real, Research Supervisor/QPL, 555-555-5555, breal@dot.state.nh.us"
    },
    {
    "abv": "fl",
    "state": "FLORIDA DEPARTMENT OF TRANSPORTATION",
    "contacts": "Concrete Admixtures (CADD)\nJane Smith, Product Evaluation Administrator, 999-999-9999, jane.smith@dot.state.fl.us\n\nHot-Mix Asphalt Crack Sealers (HMA CS)\nKaren Brown, Product Evaluation Administrator, 999-999-9990, karen.brown@dot.state.fl.us"
    } 

  ]
}

谢谢，磅

【问题讨论】：

你的报价搞砸了。应该是'<p id="state ' + key + '">'
为什么每次用户点击都加载JSON？为什么不只在页面加载时加载一次数据？这似乎是很多无关的 ajax 调用。如果每个状态只有一个项目不是大量数据，则可以继续加载到数组中。
Rob - 谢谢，我修正了引号。 @Gary Storey - 感谢您建议我将数组保存在 JSON 中，而不是将其重新格式化为普通对象。如何将单击的形状与正确的索引相关联？我是否需要在 HTML 中的每个形状上手动输入数据索引属性？ .index() 可以以某种方式使用吗？感谢您建议我在页面加载时加载一次 JSON。我将 getJSON 函数移到 onclick 函数上方，试图仅在页面加载时加载 JSON，因此只有数组在用户单击时才起作用。这个重新排列的代码是解决方案吗？（我还在学习 JavaScript。）谢谢 - LB
解决方案：我将 JSON 格式化为普通对象。在我的 .each() 方法下，我将 val 存储在一个变量中，然后使用 if else 语句将键与单击的形状的 ID 匹配。无需添加数据索引属性或 .index() 方法。

标签： javascript jquery html json svg

【解决方案1】：

解决方案：我将 JSON 格式化为普通对象。在我的.each() 方法下，我将val 存储在一个变量中，然后使用if else 语句将JSON 中的键与单击的形状的ID 匹配。无需将 data-index 属性添加到内联 html 或使用 .index() 方法。

【讨论】：