Question

我创建了一个JSON文件来调出啤酒列表的名称以显示ABV和国家/地区，但我无法在网页上显示结果。我能够让select标签下拉列表，但是当选择啤酒时，它只会将所选结果显示为“未定义”。

这是我到目前为止的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 List名为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迭代属性，而不是数组中的条目。

以下代码段不能用作所需的外部数据源。

＆＃13;

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];
  }
}

＆＃13;

<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>

＆＃13;

无法从我的JSON文件中检索数据对象

2 个答案: