無法從JSON文件檢索數據對象

Question

我創建了一個JSON文件，以調出啤酒的列表名稱來顯示ABV和國家/地區，但是我無法在網頁上顯示結果。 我可以從選擇標簽中下拉列表，但是選擇啤酒時，它只會將所選結果顯示為“未定義”。

這是我到目前為止擁有的JS代碼...

var $select = $("#beerListing");
var beer = Array();
var country = Array();

$.getJSON("data.json", function(data) {
  $select.html('');

  for (var i = 0; i < data['beer'].length; i++)
    $select.append('<option id="' + data["beer"][i]['id'] + '">' + data["beer"][i]["beer_name"] + '</option>');

  for (x in data) {
    if (beer.indexOf(data[x].beer_name) < 0) {
      var y = beer.length;
      beer[y] = data[x].beer_name;
      country[y] = data[x].brewery_country;
    }
  }

  showBeerList();
});

function showBeerList() {
  var select = document.getElementById('beerListing');

  for (var i = 0; i < beer.length; i++) {
    var obj = document.createElement("option");
    obj.text = beer[i];
    obj.value = i;
    select.appendChild(obj);
  }
}

function getBeerInfo(picked) {
  if (picked == "Pick Your Poison...") {
    location.reload();
  } else {
    document.getElementById("name").innerHTML = beer[picked];
    document.getElementById("country").innerHTML = country[picked];
  }
}

HTML：

<html>
  <head></head>
  <body>
    <h1>LCBO API TESTING</h1>

    <select name="beerlist" id="beerListing" class="form-control" onchange="getBeerInfo(this.value)">

    </select>
    <br>
    <label>Name:</label>
    <label id="name">--</label>
    <br>
    <label>Country:</label>
    <label id="country">--</label>
    <br>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script src="main.js"></script>
  </body>
</html>

JSON列表稱為data.json

{
    "beer": [{
        "beer_name": "Organic Devon Cider",
        "brewery_name": "Luscombe Organic Drinks",
        "beer_type": "Cider",
        "beer_abv": "4.9",
        "beer_ibu": "0",
        "comment": "",
        "venue_name": "The Anchor & Hope",
        "venue_city": "London",
        "venue_state": "Greater London",
        "brewery_country": "England"
    }, {
        "beer_name": "Beer A",
        "brewery_name": "Beer A",
        "beer_type": "Cider",
        "beer_abv": "4.9",
        "beer_ibu": "0",
        "comment": "",
        "venue_name": "Beer",
        "venue_city": "New York",
        "venue_state": "New York",
        "brewery_country": "USA"
    }]
}

Answer 1

我在這里工作： https ： //jsfiddle.net/bu7pkb5f/1/

您在做什么：

if (beer.indexOf(data[x].beer_name) < 0) {

    var y = beer.length;
    beer[y] = data[x].beer_name;
    country[y] = data[x].brewery_country;

}

我不明白，但是在處理了兩個真實啤酒條目之后，它正在列表中創建第三個項目。 我在小提琴中把它留了下來，所以您可以自己檢查一下。

Answer 2

您似乎將選項兩次添加到select元素，並使用for-in來迭代屬性，而不是數組中的條目。

下面的代碼段無法按要求使用外部數據源。

 var $select = $("#beerListing") ; var beer = Array(); var country = Array(); $.getJSON("data.json", function(data) { $select.html(''); for (var i = 0; i < data.beer.length; i = i + 1) { if (beer.indexOf(data.beer[i].beer_name) < 0) { beer.push(data.beer[i].beer_name); country.push(data.beer[i].brewery_country); } } showBeerList(); } function showBeerList() { var select = document.getElementById('beerListing'); for (var i = 0; i < beer.length; i++) { var obj = document.createElement("option"); obj.text = beer[i]; obj.value = i; select.appendChild(obj); } } function getBeerInfo(picked) { if (picked == "Pick Your Poison...") { location.reload(); } else { document.getElementById("name").innerHTML = beer[picked]; document.getElementById("country").innerHTML = country[picked]; } }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h1>LCBO API TESTING</h1> <select name="beerlist" id="beerListing" class="form-control" onchange="getBeerInfo(this.value)"> </select> <br> <label>Name:</label> <label id="name">--</label> <br> <label>Country:</label> <label id="country">--</label> <br>

無法從JSON文件檢索數據對象

問題描述

2 個解決方案

解決方案1
0 2016-12-30 16:45:00

解決方案2
0 已采納 2016-12-30 16:51:38

無法從JSON文件檢索數據對象

問題描述

2 個解決方案

解決方案1 0 2016-12-30 16:45:00

解決方案2 0 已采納 2016-12-30 16:51:38

解決方案1
0 2016-12-30 16:45:00

解決方案2
0 已采納 2016-12-30 16:51:38