javascript - JSon Array into HTML Select Option - Stack Overflow

admin管理员组

文章数量:1295864

so I'm a real noob when it es to javascript. I tried all the solutions here on the site and I checked a few other things from google, but I didn't find anything that worked for me.

I have to create a json array and importat that into a select option list. The goal is to choose music titles from a listbox.

Here's my current html code (if you need more of the code tell me, for now I will just post what I think is necessary):

<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: Here's the updated code, but it still doesnt work.

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

}

so I'm a real noob when it es to javascript. I tried all the solutions here on the site and I checked a few other things from google, but I didn't find anything that worked for me.

I have to create a json array and importat that into a select option list. The goal is to choose music titles from a listbox.

Here's my current html code (if you need more of the code tell me, for now I will just post what I think is necessary):

<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: Here's the updated code, but it still doesnt work.

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

}

• javascript
• jquery
• html
• arrays
• json

Share Improve this question Follow edited Dec 8, 2014 at 19:25 Atiyo asked Dec 8, 2014 at 18:29 AtiyoAtiyo 1311 gold badge11 silver badge44 bronze badges 4

• 2 Note: Use JSON.parse(titelliste) instead of eval('(' + titelliste + ')'). – gen_Eric Commented Dec 8, 2014 at 18:31
• You are doing options[j].Text and options[j].Value. Have a look at your array. The objects don't have those properties. – gen_Eric Commented Dec 8, 2014 at 18:33
• Thanks, but it didn't work. But if I understand correctly you want me to replace options[j].Text with for example options[j].Titel right? – Atiyo Commented Dec 8, 2014 at 18:43
• Yes. You need to get the data from your object, however it's named :-) – gen_Eric Commented Dec 8, 2014 at 18:44

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 4

Here's a pure JavaScript option:

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

<select id="Select" name="Titel"></select>

It is fairly obvious from your code that you're not familiar with how jQuery works, so I would remend sticking with pure JavaScript until you get a full understanding of the language itself.

What I am doing here is very simple:

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

First, I create a for loop to loop through each of the JSON objects contained in the titelliste array.

Then, at each iteration:

• I assign a variable to the select element.
• Create an option element
• Assign the text attribute of the option to the Titel value in the JSON object
• Assign the value attribute of the option to the Produktid value in the JSON object
• Add the newly created option to the select element

I hope this help you understand a little more about what's going on in the code.

You can also use map(). The parameter val of the function is an object that contains Produktid and Titel. So you can use the map() function. Here's an example:

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

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

Reference:

• map()

Also look at another iteration - each()

A few things need changing in your code.

• You don't need to eval the JSON as long as you know it is valid you are OK.
• An <option> tag doesn't have a "text" attribute. In jQuery you should use $('.selector').text() to change the inner text for a tag
• Your JSON object has Titel and Produktid as properties, not text and value.
• Be careful ... your <select> tag has a different id attribute than the one you specify in $('#mySelect').append(newOption); (Your select is id="select" not "mySelect").

Here's a working fiddle.

void main's answer is pretty clear and concise.

There is no need to use eval since the variable is already an array of objects. Your select box should be empty considering you are going to append elements to it anyways.

Here is a jsfiddle still using a javascript for loop:

http://jsfiddle/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();

本文标签： javascriptJSon Array into HTML Select OptionStack Overflow