Füllen Dropdown-Liste in HTML mit JSON-Daten

Ich bin ein Student und sehr neu zu Code. Ich habe eine Dropdown-Liste mit HTML und CSS erstellt und versuche, sie mit Daten aus JSON zu füllen. Das ist mein HTML-Code:Füllen Dropdown-Liste in HTML mit JSON-Daten

<div class="dropdown"> 
    <button class="dropbtn">Choose your area</button> 
    <div class="dropdown-content"> 
    <a href="#">Place 1</a> 
    <a href="#">Place 2</a> 
    <a href="#">Place 3</a> 

    </div> 
</div>

Ich versuche, 'Platz 1' zu ersetzen, 'Place 2' usw. mit über 150 reale Ortsnamen. Diese sind in JSON:

"areaNames": [ 
{ 
    "A": 1, 
    "B": "Barking & Dagenham" 
}, 
{ 
    "A": 2, 
    "B": "Barnet" 
},

und so weiter. Wie ziehe ich die Ortsnamen von JSON an die Stelle von "Place 1", "Place 2" usw.? Ich habe versucht, den Ratschlägen in Bezug auf ähnliche Tutorials zu folgen, aber das scheint mir eine Liste von mehreren separaten Dropdown-Boxen zu geben, anstatt einer einfachen Liste von Orten.

Danke für Ihre Hilfe.

Quelle

2017-04-02 wiggo

Da Sie das 'javascript'-Tag hinzugefügt haben, fügen Sie bitte auch den JavaScript-Code ein, den Sie bisher versucht haben, damit wir Ihnen beim Debuggen oder Verbessern helfen können. – ITWitch

Ich sehe kein Dropdown-Code.

Sie könnten jQuery verwenden, die eine Javascript-Bibliothek ist, um Ihr Ziel zu erreichen.

HTML:

<select id="sel"> 

</select>

JavaScript:

$(function() { 
    var data = [ 
     { 
     "id": "1", 
     "name": "test1"}, 
    { 
     "id": "2", 
     "name": "test2"} 
    ]; 
    $.each(data, function(i, option) { 
     $('#sel').append($('<option/>').attr("value", option.id).text(option.name)); 
    }); 
})

Quelle

2017-04-02 08:38:09 jjj

Hier arbeitet Beispiel mit reinem JS.

var areaNames = [ 
 
    { 
 
    "A": 1, 
 
    "B": "Barking & Dagenham", 
 
    "C": "https://google.com" 
 
    }, 
 
    { 
 
    "A": 2, 
 
    "B": "Barnet", 
 
    "C": "https://google.com" 
 
    } 
 
] 
 

 
var dropdownContent = document.querySelector('.dropdown-content'); 
 

 
for (i = 0; i < areaNames.length; i++) { 
 

 
    var element = areaNames[i]; 
 

 
    var htmlToAppend = document.createElement('a'); 
 
    htmlToAppend.innerHTML = element.B; 
 
    htmlToAppend.href = element.C; 
 
    
 
    dropdownContent.appendChild(htmlToAppend); 
 
}

a { 
 
    display: block; 
 
}

<div class="dropdown"> 
 
    <button class="dropbtn">Choose your area</button> 
 
    <div class="dropdown-content"> 
 

 
    </div> 
 
</div>

Quelle

2017-04-02 08:50:53 loelsonk

Ich glaube, Sie haben bereits die JSON-Daten in das DOM geladen, so dass Sie die Daten in Ihrem Javascript zugreifen können. Verwenden Sie eine JavaScript-Bibliothek oder Framework wie - jQuery, AngularJS oder Javascript? Es ist immer besser, Ihren Javascript-Code extern in einer Datei mit der Endung .js zu organisieren und in Ihrem HTML-Code unter <script> in oder <body> zu laden.

Schritte, um die Anker-Tags dynamisch in einer HTML zu generieren:

die Daten aus JSON in das DOM-Objekt (JavaScript)
Holen Sie sich das übergeordnete HTML-Element erstellen/verfolgen, die die Optionen enthält. Behalte diese Referenz in einer Variablen.
Iterate in das Datenfeld (oder Objekte) aus der in jeder Iteration
Erstellen Sie das HTML-Element den Wert der betreffenden Eigenschaft
JSON zugegriffen erhalten, die wiederholt mit jedem Datenwert verwendet wird. In diesem Fall sollte die Vorlage "Wert" sein.
Fügen Sie diesen generierten Code in das Elternelement ein, das in # 2 oben gespeichert wurde.
Nachdem die Iteration abgeschlossen ist, injizieren (anhängen) das übergeordnete Element in das DOM an der entsprechenden Stelle.

Fall 1: Plain Javascript -

Verwenden XHR die JSON und bekommen die Daten in eine Variable zu lesen. Benennen wir es JSONData.

Wir behalten den Verweis des Elternelements, das im HTML erstellt wurde, in Javascript.

// die Hoffnung, dass Sie nur ein Element mit diesem Klassennamen oder das

// betreffende Element ist das erste Element dieses Klassennamen in diesem HTML-Code. Im Allgemeinen

//, als eine gute Praxis, die wir entweder ID verwenden sollten ein Element einzeln in unserem JavaScript-Code zu identifizieren,

// sonst Verwendung spezifische Bezeichner für das gleiche.

var parentDropdownContainer = document.getElementsByClassName ('dropdown-content') [0];

Iterieren in den JSON-Daten

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){ 
    //we will add logic to generate HTML 
}

Sie die anderen Varianten der Iteration verwenden können - in, während Array.splice(), usw. bis Ihr Verständnis.

Innerhalb dieses Iterator brauchen wir einen HTML-Code erstellen und an den Behälter Mutter

for (var counter = 0, len = JSONData.length - 1; counter < len; counter ++){ 
    var currentData = JSONData[counter]; //this holds the reference of the current data in this iteration 
    var dropdownElement = document.createElement('a'); 
    dropdownElement.setAttribute('href','#'); //this adds the href attribute into the anchor element. 
    //lets add another attribute to the anchor element to represent the dynamic id/value associated with this data 
    dropdownElement.setAttribute('data-value',currentData.A); 
    //lets add the value inside the anchor element 
    dropdownElement.innerHTML = currentData.B; 
    //lets append this element to the parent container 
    parentDropdownContainer.appendChild(dropdownElement); 
}

Nun hängt Sie soll die erforderlichen dynamischen Optionen in der Dropdown-Liste machen.

Quelle

2017-04-02 09:43:50 GeeDee

Füllen Dropdown-Liste in HTML mit JSON-Daten

Antwort

Verwandte Themen