定位对象中的名称以创建下拉列表答案

【问题标题】：Targeting names in an object to create a drop down定位对象中的名称以创建下拉列表
【发布时间】：2018-04-04 09:39:48
【问题描述】：

我正在尝试从包含状态名称作为属性的对象创建 50 个状态的下拉列表。示例如下：

window.LGMaps.maps.usa = {
    "paths": [
        {
            "enable": true,
            "name": "Alabama",
            "abbreviation": "AL",
            "textX": 657,
            "textY": 405,
            "color": "#5b9fbb",
            "hoverColor": "#12407e",
            "selectedColor": "#d12229",
            "url": "http://www.uskoreacouncil.org/",
            "text": "<h1>Alabama</h1><br /><h3>Goods Exported to Korea</h3><li>Top Category: Motor Vehicles</li> <li>Total Exports: 526,379,126</li> <h3>Services Exported to Korea</h3> <li>Top Category: Travel</li><li>Total Exports: 165,827,003</li><h3>Jobs Tied to Goods/Services</h3><li>Goods Related: 2,455</li><li>Services Related: 1,363</li>",
            "path": "M 631.30647,460.41572 L 629.81587,446.09422 L 627.06763,427.34158 L 627.22929,413.27709 L 628.03759,382.23824 L 627.87593,365.58718 L 628.04102,359.16812 L 672.5255,355.54867 L 672.3777,357.73109 L 672.53936,359.83269 L 673.18601,363.22756 L 676.58089,371.14893 L 679.00579,381.01024 L 680.46074,387.15335 L 682.07734,392.00317 L 683.5323,398.95458 L 685.63388,405.25934 L 688.22045,408.65423 L 688.70543,412.04909 L 690.64537,412.8574 L 690.80703,414.95899 L 689.02875,419.80881 L 688.54377,423.04203 L 688.38211,424.98195 L 689.99873,429.3468 L 690.32205,434.68159 L 689.51373,437.10651 L 690.16039,437.91481 L 691.61533,438.72311 L 691.94347,441.61193 L 686.34581,441.25838 L 679.55606,441.90503 L 654.01366,444.81491 L 643.6021,446.22168 L 643.38072,449.09908 L 645.15899,450.87735 L 647.74556,452.81727 L 648.32642,460.75271 L 642.78436,463.32561 L 640.03614,463.00229 L 642.78436,461.06236 L 642.78436,460.0924 L 639.71282,454.11096 L 637.44957,453.46432 L 635.99462,457.82915 L 634.70134,460.57738 L 634.0547,460.41572 L 631.30647,460.41572 z"
        },

我尝试使用 .each() jQuery 方法来执行此操作，但我正在努力让状态填充到下拉菜单中。

<div class="container">
    <div>
      <select>
        <option>Select a State</option>
        <option class="state"> </option>
      <select>
    </div>

function list_states(){
    var states = window.LGMaps.maps.usa.paths.name;
    $(".container .dropdown").text(states).each();
};

我正在寻找如何获取所有状态并在我的下拉列表中遍历它们。

【问题讨论】：

标签： jquery json dom iteration

【解决方案1】：

有几点需要注意：

在您的示例中，window.LGMaps.maps.usa 会导致错误，因为“我们” 没有可用的嵌套对象结构；也许你会，在在这种情况下，这应该适合您
jQuery 中的.each() 和$.each() 完全不同，因为$(selector).each() 迭代了一组 jQuery 对象，$.each() 是一个通用的迭代器函数。您不必必须使用 jQuery 来迭代对象/数组：您可以使用简单的 for 循环，记住这可能会在访问属性时从原型链中挖出垃圾，尤其是这样如name；不过，使用 jQuery 也不错。

window.states = {
  paths: [{ name: "Alabama" }, { name: "Arkansas" }]
};

function list_states() {
  var states = window.states;
  $.each(states.paths, function(index, state){
    $('.container select').append('<option>' + state.name + '</option>');
  });
};

list_states();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div>
    <select>
        <option>Select a State</option>
      </select>
  </div>

由于您在问题中对 jQuery 的使用表明您对它不太熟悉，因此我不会提供一个会让您感到困惑多于开明的答案，因此我建议的唯一“改进”可能是避免分配到window，并避免显式调用那个小函数：

$(function() {
  // this function executes as soon as the DOM is ready; it has the same effect as $(document).ready(function() {...});

  // this variable is not visible outside of the closure, i.e. it is not assigned to the global window object
  var states = { paths: [{ name: "Alabama" }, { name: "Arkansas" }] };

  $.each(states.paths, function(index, state) {
    $(".container select").append("<option>" + state.name + "</option>");
  });
});

【讨论】：