JSONファイルからデータオブジェクトを取得できません

ABVと国を表示するビールリストの名前を呼び出すためにJSONファイルを作成しましたが、Webページに結果を表示できません。私はリストをドロップダウンする選択タグを得ることができましたが、ビールを選択すると、選択された結果が "未定義"としてのみ表示されます。ここで JSONファイルからデータオブジェクトを取得できません

が...私がこれまで持っている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" 
    }] 
}

出典

2016-12-30 S.Demarco

同様 – theCaveat

をJSONファイルを投稿してください、私はすぐに –

S.Demarco @小さなJSONリストが追加されます私は少しあなたのJSONを固定していますが、その中にコンマを持っていない、私はdidnの実際にあなたのデータがそうであれば、それを修正したいと思っています。それは間違っている、2つのビールオブジェクトの間にカンマがある必要があります}、{ –

select要素にオプションを2回追加し、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>

出典

2016-12-30 16:51:38

、感謝しました。しかし、私は依然として、割り当てられたデータステートメントからではなく、jsonファイルからデータを取得する必要があります。 app.jsonには、すべてのビールオブジェクトを呼び出すためのインクルードが必要です。 –

@ S.Demarco ajaxデータフェッチを使用するように更新されました。外部データJSONファイルに依存してテストできません。 –

ありがとう、征服しました。私はあなたのコードを試し、あなたがうまくいくかどうかを知らせます。 –

と呼ばれます：https://jsfiddle.net/bu7pkb5f/1/

W帽子あなたがやっている：

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

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

}

私はそれを理解していないが、2つの本当のビールのエントリが処理された後には、リスト内の3番目の項目を作成しています。私はあなたがあなた自身でそれをチェックすることができるように、それはフィドルでコメントアウトしました。

出典

2016-12-30 16:45:00

ビール配列に別のエントリを追加するには、beer.push（）を使用します。 –

Serg、唯一の問題はリストが2つ以上のビールオブジェクトであることです。私のjsonファイルには1800を超えるビールオブジェクトがあります。 2つのオブジェクトを割り当てても問題ありませんが、1800は多くの行を取ります。そのため、jsonファイル内のオブジェクトを取得したいのです。また、2番目のオプションは、使用していたURLが動作しなくなるまで動作する呼び出しスクリプトでオブジェクトが呼び出された別のjsonアプリケーションからのものでした。 –

@ S.Demarco JSONファイルからデータをロードしています。私はそれをjsfiddleに貼り付ける必要がありました。なぜなら、そこからAjaxリクエストを作成することができないからです。手動のものは何もありません。あなたはJSONに300個のオブジェクトがあり、私のコードは現在のように動作します。変更は必要ありません。 –

JSONファイルからデータオブジェクトを取得できません

答えて

関連する問題