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

我正在为美国互动 Map 制作概念证明 . 当用户单击状态形状时，有关该特定状态的文本信息应显示在 Map 下方的div中 . 我有一个包含两个SVG形状的html文件，一个JS文件和一个当前包含数组的JSON文件 . 我希望这个 Map 如何工作：当用户点击形状时，形状的ID被传递给getJSON函数，其键/索引与该ID匹配的对象将是从JSON中检索的唯一对象，并最终显示在 Map 下方的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"
    } 

  ]
}

谢谢，LB