javascript - 无法从下拉列表中的 JSON 文件调用列表

Question

功能:

我需要使用 json 文件填充下拉菜单。

问题:

我的下拉列表无法调用 json 文件中的 json 对象，因此未填充它。我在 json 文件调用中做错了什么？

请帮忙。谢谢

代码:

 $(function() {
   /*******************************************************
    *FUNCTION CALL TO POPULATE DROPDOWN MENU FROM JSON FILE*
    *******************************************************/
   $.getJSON("JSON/shops.json", function(obj) {
     $.each(obj.Shops, function(key, value) {
       $("#dropDownShops_1").append("<option>" + value.ShopsName + "</option>");
     });

     $.each(obj.Shops, function(key, value) {
       $("#dropDownShops_2").append("<option>" + value.ShopsName + "</option>");
     });
   });
 });

#dropDownShops_1 {
  position: absolute;
  width: 350px;
  height: 73px;
  z-index: 100;
  top: 250px;
  left: 450px;
}
#dropDownShops_2 {
  position: absolute;
  width: 350px;
  height: 73px;
  z-index: 100;
  top: 650px;
  left: 450px;
}

<select name="drop_down" id="dropDownShops_1">
  <option value="None" selected="Selected">Select Shops</option>
</select>

<select name="drop_down" id="dropDownShops_2">
  <option value="None" selected="Selected">Select Shops</option>
</select>

JSON 代码文件:

{
"Shops": [
{
    "ShopName": "7en",
    "ShopID": "7en123",
    "Shoplocation": "#02-31"
}, {
    "ShopName": "8Taries",
    "ShopID": "8Taries123",
    "Shoplocation": "#B2-K4"
}, {
    "ShopName": "A|Xange",
    "ShopID": "A|Xange123",
    "Shoplocation": "#01-202"
}, {
    "ShopName": "Actiity",
    "ShopID": "Actiity123",
    "Shoplocation": "#02-38"
}, { 
    "ShopName": "Z Tnest", 
    "ShopID": "ZTnest123",
    "Shoplocation": "#B2-12"
}]   
}

Answer 1

它的ShopName不是ShopsName

var obj = {
  "Shops": [{
    "ShopName": "7en",
    "ShopID": "7en123",
    "Shoplocation": "#02-31"
  }, {
    "ShopName": "8Taries",
    "ShopID": "8Taries123",
    "Shoplocation": "#B2-K4"
  }, {
    "ShopName": "A|Xange",
    "ShopID": "A|Xange123",
    "Shoplocation": "#01-202"
  }, {
    "ShopName": "Actiity",
    "ShopID": "Actiity123",
    "Shoplocation": "#02-38"
  }, {
    "ShopName": "Z Tnest",
    "ShopID": "ZTnest123",
    "Shoplocation": "#B2-12"
  }]
}

$.each(obj.Shops, function(key, value) {
  $("#dropDownShops_1,#dropDownShops_2").append("<option>" + value.ShopName + "</option>");
});

#dropDownShops_1 {
  position: absolute;
  width: 350px;
  height: 73px;
  z-index: 100;
  top: 250px;
  left: 450px;
}
#dropDownShops_2 {
  position: absolute;
  width: 350px;
  height: 73px;
  z-index: 100;
  top: 650px;
  left: 450px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="drop_down" id="dropDownShops_1">
  <option value="None" selected="Selected">Select Shops</option>
</select>

<select name="drop_down" id="dropDownShops_2">
  <option value="None" selected="Selected">Select Shops</option>
</select>