JSon-Array in HTML-Select-Option

so, ich bin ein echter noob wenn es um javascript.
Ich habe versucht, alle Lösungen hier auf der Seite und ich habe ein paar andere Sachen von google, aber ich habe nichts gefunden, dass für mich gearbeitet.

Ich habe ein json-array und importat, die in einer select-option-Liste. Das Ziel ist, wählen Sie Musiktitel aus einer listbox.

Hier ist mein Aktueller html-code (wenn Sie brauchen mehr von der code mir sagen, jetzt werde ich nur posten, was ich denke, ist notwendig):

<td><input id="anzahl" type="number" min="1" max="100"></td>
<td><select id="mySelect" name="Titel">
<option id="01"></option>
<option id="02"></option>
<option id="03"></option>
<option id="04"></option>
<option id="05"></option>
<option id="06"></option>
<option id="07"></option>
<option id="08"></option>
<option id="09"></option>
<option id="10"></option>
</select></td>
...

EDIT: Hier der aktualisierte code, aber es immer noch nicht funktioniert.

function initSelBox_Product() {
var titelliste= [
{"Produktid":"01","Titel":"Dangerous","Band":"David Guetta","Nettoeinzelpreis":"1.99"},      
{"Produktid":"02","Titel":"Sun goes down","Band":"Robin Schulz","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"03","Titel":"Fade out lines","Band":"The Avener","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"04","Titel":"Walk","Band":"Kwabs","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"05","Titel":"Blame","Band":"Calvin Harris","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"06","Titel":"Geronimo","Band":"Sheppard","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"07","Titel":"Animals","Band":"Maroon 5","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"08","Titel":"What are you waiting for?","Band":"Nickelback","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"09","Titel":"Shake it off","Band":"Taylor Swift","Nettoeinzelpreis":"1.99"}, 
{"Produktid":"10","Titel":"Chandelier","Band":"Sia","Nettoeinzelpreis":"1.99"} ];


for (var i = 0; i < titelliste.length; i++) {
    var select = document.getElementById("mySelect");
    var option = document.createElement("option");
    option.text = titelliste[i].Titel;
    option.value = titelliste[i].Produktid;
    select.add(option);
}

}

Hinweis: Verwenden Sie JSON.parse(titelliste) statt eval('(' + titelliste + ')').
Sie tun options[j].Text und options[j].Value. Haben Sie einen Blick auf das array. Die Objekte, die nicht diese Eigenschaften haben.
Danke, aber es hat nicht funktioniert. Aber wenn ich das richtig verstanden habe wollen Sie mich ersetzen options[j].Text mit z.B. options[j].Titel richtig?
Ja. Sie benötigen, um die Daten von Ihrem Objekt, aber Sie benannt ist 🙂

InformationsquelleAutor Atiyo | 2014-12-08

0

Ein paar Sachen geändert im code.
- Sie nicht brauchen, um eval das JSON so lange wie Sie wissen, ist es gültig, Sie sind OK.
- Eine <option> tag nicht ein "text" - Attribut. In jQuery, die Sie verwenden sollten $('.selector').text() ändern Sie den inneren text für einen tag
- Ihre JSON-Objekt-hat Titel und Produktid als Eigenschaften, nicht als text und Wert.
- Vorsichtig sein ... Ihr <select> tag hat eine andere id-Attribut als die, die Sie angeben, in $('#mySelect').append(newOption); (select id="select" nicht "mySelect").
Hier ist eine funktionierende fiddle.
- vielen Dank ich habe es endlich an die Arbeit 😀 weiß nicht, was das problem war, ich habe versucht, Ihre Lösung früher, es hat nicht funktioniert, aber jetzt funktioniert es. Vielen Dank an alle anderen, die geholfen haben mich gut, habe viel gelernt heute 🙂
InformationsquelleAutor The CodePunker
3

Hier ist eine Reine JavaScript-option:

JS:
```
var titelliste = [
    { "Produktid": "01", "Titel": "Dangerous", "Band": "David Guetta", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "02", "Titel": "Sun goes down", "Band": "Robin Schulz", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "03", "Titel": "Fade out lines", "Band": "The Avener", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "04", "Titel": "Walk", "Band": "Kwabs", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "05", "Titel": "Blame", "Band": "Calvin Harris", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "06", "Titel": "Geronimo", "Band": "Sheppard", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "07", "Titel": "Animals", "Band": "Maroon 5", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "08", "Titel": "What are you waiting for?", "Band": "Nickelback", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "09", "Titel": "Shake it off", "Band": "Taylor Swift", "Nettoeinzelpreis": "1.99" },
    { "Produktid": "10", "Titel": "Chandelier", "Band": "Sia", "Nettoeinzelpreis": "1.99" }
];
for (var i = 0; i < titelliste.length; i++) {
    var select = document.getElementById("Select");
    var option = document.createElement("option");
    option.text = titelliste[i].Titel;
    option.value = titelliste[i].Produktid;
    select.add(option);
}
```
HTML:
```
<select id="Select" name="Titel"></select>
```
Es ist ziemlich offensichtlich aus dem code, dass Sie nicht vertraut sind mit, wie jQuery funktioniert, so würde ich empfehlen, kleben mit reinem JavaScript, bis Sie ein volles Verständnis der Sprache selbst.

Was ich hier mache ist ganz einfach:
```
for (var i = 0; i < titelliste.length; i++) {
    var select = document.getElementById("Select");
    var option = document.createElement("option");
    option.text = titelliste[i].Titel;
    option.value = titelliste[i].Produktid;
    select.add(option);
}
```
Zuerst erstelle ich eine for - Schleife, um durch die einzelnen JSON-Objekte in der titelliste array.

Dann bei jeder iteration:
- Ich einer Variablen zuweisen, um die select element.
- Erstellen Sie eine option element
- Weisen die text - Attribut des option, um die Titel Wert in das JSON-Objekt
- Weisen die value - Attribut des option, um die Produktid Wert in das JSON-Objekt
- Fügen Sie die neu erstellte option, um die select element
Ich hoffe, dass dies helfen Sie verstehen ein wenig mehr über das, was im code auf.
- Vielen Dank, ich versuchte Ihren code, aber es hat nicht funktioniert für mich. Noch keine Optionen in der select-box auf meiner Website.
- Wenn du einfach nur copy/Paste meine JavaScript-code, es würde nicht funktionieren, genau mit den HTML-Code - ich habe die ID des select-element aus select zu Select. Ich bevorzuge alle meine ID ' s captialized.
- Ich habe ja, bevor ich es versucht habe und alles geändert, so passt er für meinen code. Immer noch nicht funktioniert hat, habe ich das Gefühl sth falsch mit meiner pc/eclipse.
- Funktioniert der code funktioniert, wenn man den snippet oben? Wenn dem so ist, dann ist es vielleicht etwas anderes in deinem code irgendwo, das auslösen eines Fehlers dazu führen würde, dass der restliche code nicht ausgeführt.
- Ja der code funktioniert, wenn ich das snippet. Ist es vielleicht ein problem, dass die select-options ist in einer Tabelle? Muss ich vielleicht hinzufügen sth mag .Tabelle in der js-code?
- Nee, es ist der Zugriff auf die select element direkt von ID, es spielt keine Rolle, was das element parent ist.
InformationsquelleAutor Howard Renollet

Können Sie auch map(). Die parameter val von der Funktion ist ein Objekt, das enthält Produktid und Titel. So können Sie die map() Funktion. Hier ist ein Beispiel:

JS:

var titelliste= [
        {"Produktid":"01","Titel":"Dangerous","Band":"David Guetta","Nettoeinzelpreis":"1.99"},
        {"Produktid":"02","Titel":"Sun goes down","Band":"Robin Schulz","Nettoeinzelpreis":"1.99"},
        {"Produktid":"03","Titel":"Fade out lines","Band":"The Avener","Nettoeinzelpreis":"1.99"},
        {"Produktid":"04","Titel":"Walk","Band":"Kwabs","Nettoeinzelpreis":"1.99"},
        {"Produktid":"05","Titel":"Blame","Band":"Calvin Harris","Nettoeinzelpreis":"1.99"},
        {"Produktid":"06","Titel":"Geronimo","Band":"Sheppard","Nettoeinzelpreis":"1.99"},
        {"Produktid":"07","Titel":"Animals","Band":"Maroon 5","Nettoeinzelpreis":"1.99"},
        {"Produktid":"08","Titel":"What are you waiting for?","Band":"Nickelback","Nettoeinzelpreis":"1.99"},
        {"Produktid":"09","Titel":"Shake it off","Band":"Taylor Swift","Nettoeinzelpreis":"1.99"},
        {"Produktid":"10","Titel":"Chandelier","Band":"Sia","Nettoeinzelpreis":"1.99"} ];
var options = titelliste.map(function(val, ind){
    return $("<option></option>").val(val.Produktid).html(val.Titel);
});
$('#mySelect').append(options);

HTML:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<select id="mySelect"></select>

Referenz:

map()

Sich auch mit einem anderen iteration
- each()

Anstelle von Anhängen von Zeichenketten wie, dass, verwenden Sie richtigen Funktionen, um Probleme zu vermeiden mit funky-Zeichen (z.B. Anführungszeichen im text): jQuery("<option></option>").val(val.Produktid).html(val.Titel)
danke. Es ist auch ein guter Punkt.
Sie sind mit einem map(), aber im Stil der each() konstruieren. In der Regel, eine Karte 'übersetzt' / gibt die Elemente in ein array oder ein Objekt in ein neues array mit Elementen, die das resultierende array aus dem Aufruf map(). Derzeit sind Sie nicht Rücksendung innerhalb der map() Funktion, sondern iterativ Gebäude der resultierende string... ein Muster ist besser geeignet für einen each(). </pedantisch> ich werde Bearbeiten Sie Ihre Antwort, als ich wirklich wie Sie map-basierte Lösung (und es kann verbessert werden). Es kann getestet werden, jsfiddle.net/r28Ly010.

InformationsquelleAutor MH2K9

void main Antwort ist ziemlich klar und prägnant.

Gibt es keine Notwendigkeit für die Verwendung von eval, da die variable bereits ein array von Objekten.
Die select-box sollte leer sein, da du wirst Anhängen Elemente sowieso.

Hier ein jsfiddle noch mit einer javascript for-Schleife:

http://jsfiddle.net/horxu2yc/

<select id="mySelect"></select>

function initSelBox_Product() {
    var titelliste = [
    {"Produktid":"01","Titel":"Dangerous","Band":"David Guetta","Nettoeinzelpreis":"1.99"},      
    {"Produktid":"02","Titel":"Sun goes down","Band":"Robin Schulz","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"03","Titel":"Fade out lines","Band":"The Avener","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"04","Titel":"Walk","Band":"Kwabs","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"05","Titel":"Blame","Band":"Calvin Harris","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"06","Titel":"Geronimo","Band":"Sheppard","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"07","Titel":"Animals","Band":"Maroon 5","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"08","Titel":"What are you waiting for?","Band":"Nickelback","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"09","Titel":"Shake it off","Band":"Taylor Swift","Nettoeinzelpreis":"1.99"}, 
    {"Produktid":"10","Titel":"Chandelier","Band":"Sia","Nettoeinzelpreis":"1.99"} ];

    for (var key in titelliste)
    {
        var option = titelliste[key];
        var newOption = $('<option/>');

        newOption.val(option.Produktid);
        newOption.text(option.Titel);

        $('#mySelect').append(newOption);
    }

}

initSelBox_Product();

InformationsquelleAutor Mr. Meeseeks

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.