Datenobjekte aus meiner JSON-Datei können nicht abgerufen werden

Ich habe eine JSON-Datei erstellt, um den Namen einer Bierliste zur Anzeige von ABV und Land aufzurufen. Die Ergebnisse können jedoch nicht auf der Webseite angezeigt werden. Ich war in der Lage, das select-Tag zu bekommen, um die Liste zu löschen, aber wenn ich ein Bier auswähle, werden nur die ausgewählten Ergebnisse als "undefiniert" angezeigt.Datenobjekte aus meiner JSON-Datei können nicht abgerufen werden

Hier ist der JS-Code, die ich bisher ... haben

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 Liste genannt 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" 
    }] 
}

Quelle

2016-12-30 S.Demarco

bitte auch die JSON-Datei schreiben – theCaveat

Ich werde eine kleine JSON Liste hinzufügen kurz –

@ S.Demarco i Ihre JSON fixiert ein wenig, aber sie haben kein Komma drin, ich didn Ich will das auch nicht beheben, wenn es tatsächlich so ist, wie deine Daten sind. Das ist falsch, zwischen den beiden Bierobjekten sollte ein Komma stehen}, { –

Sie schienen die Optionen zweimal zum select-Element hinzuzufügen und for-in zu verwenden, bei denen Eigenschaften, nicht Einträge in einem Array, iteriert werden.

Das folgende Snippet funktioniert nicht, da eine externe Datenquelle erforderlich ist.

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>

Quelle

2016-12-30 16:51:38

Bezwungen, danke. Aber ich muss immer noch die Daten aus der JSON-Datei abrufen und nicht aus der zugewiesenen Datenanweisung. Die app.json muss enthalten sein, damit ich alle Bierobjekte –

@ S.Demarco aufrufen kann, um den Ajax-Daten-Abruf zu verwenden. Kann nicht testen, da er sich auf externe JSON-Daten verlässt. –

Danke, besiegt. Ich werde Ihren Code versuchen und Sie wissen lassen, ob es funktioniert –

Ich habe es hier zu arbeiten : https://jsfiddle.net/bu7pkb5f/1/

W Hut machen Sie mit:

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

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

}

Ich verstehe es nicht, aber es ist ein drittes Element in der Liste zu schaffen, nachdem die beiden echten Biereinträge verarbeitet werden. Ich habe es in der Geige auskommentiert, damit du es dir selbst ansehen kannst.

Quelle

2016-12-30 16:45:00

Verwenden Sie bier.push(), um einen weiteren Eintrag zum Bier-Array hinzuzufügen, gleich für das Land. –

Serg, das einzige Problem ist, dass die Liste mehr als 2 Bierobjekte ist. Meine JSON-Datei enthält über 1800 Bierobjekte. Das Zuweisen von zwei Objekten ist in Ordnung, aber 1800 wird viele Zeilen belegen. Deshalb möchte ich die Objekte in einer JSON-Datei abrufen. Die zweite Option stammt von einer anderen JSON-App, in der die Objekte in einem Aufrufskript aufgerufen wurden, das funktionierte, bis die von mir verwendete URL nicht mehr funktionierte. –

@ S.Demarco Ich lade die Daten aus Ihrer JSON-Datei. Ich musste es in die Fiddle einfügen, weil ich von dort aus keine Ajax-Anfrage machen kann. Nichts ist manuell, Sie können JSON 300 Objekte haben und mein Code wird so funktionieren wie er ist. Keine Änderungen erforderlich. –

Datenobjekte aus meiner JSON-Datei können nicht abgerufen werden

Antwort

Verwandte Themen