JSon Array into HTML Select Option

Question

so I'm a real noob when it comes 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);
}

}

Note: Use JSON.parse(titelliste) instead of eval('(' + titelliste + ')'). — gen_Eric
– 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
– 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
– Atiyo, Commented Dec 8, 2014 at 18:43
Yes. You need to get the data from your object, however it's named :-) — gen_Eric
– gen_Eric, Commented Dec 8, 2014 at 18:44

Howard Renollet · Accepted Answer · 2014-12-08 18:55:31Z

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 recommend 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.

edited Dec 8, 2014 at 18:55

answered Dec 8, 2014 at 18:46

Howard Renollet

4,7392 gold badges26 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Atiyo Over a year ago

Thanks, I tried your code, but it didn't work for me. Still no options in the select box on my site.

Howard Renollet Over a year ago

@Atiyo If you just copy/pasted my JavaScript code, it wouldn't work exactly with your HTML - I changed the ID of the select element from select to Select. I prefer to have all of my ID's captialized.

Atiyo Over a year ago

Yes I checked it before I tried it and changed everything so it fits for my code. Still didn't work, I have the feeling sth is wrong with my pc/eclipse.

Howard Renollet Over a year ago

Does the code work if you run the snippet above? If so, then there may be something else in your code somewhere that is throwing an error that would cause the remainder of your code to not execute.

Atiyo Over a year ago

Yes the code works if i run the snippet. Is it maybe a problem that the select options is in a table? Do i have to add maybe sth like .table in the js code?

|

trincot · Accepted Answer · 2017-08-02 21:17:12Z

3

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.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<select id="mySelect"></select>

Reference:

map()

Also look at another iteration - each()

edited Aug 2, 2017 at 21:17

trincot

357k38 gold badges282 silver badges338 bronze badges

answered Dec 8, 2014 at 18:40

MH2K9

12.1k7 gold badges34 silver badges49 bronze badges

2 Comments

Joe Enos Over a year ago

Instead of appending strings like that, use proper functions to avoid issues with funky characters (like quotes within the text): jQuery("<option></option>").val(val.Produktid).html(val.Titel)

Jochem Schulenklopper Over a year ago

@MH2K9, <pendantic> you're using a map(), but in the style of the each() construct. Typically, a map 'translates' / returns items in an array or object into a new array of items, returning the resulting array from the call to map(). Currently, you're not returning items inside the map() function, but iteratively building the resulting string... a pattern more appropriate for an each(). </pedantic> I will edit your answer, as I really like you map-based solution (and it can be improved). It can be tested at jsfiddle.net/r28Ly010.

The CodePunker · Accepted Answer · 2014-12-08 18:49:43Z

0

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.

answered Dec 8, 2014 at 18:49

The CodePunker

1955 bronze badges

1 Comment

Atiyo Over a year ago

thanks i finally got it to work :D don't know what the problem was, i tried your solution earlier, it didnt work, but now it does. Thanks to everyone else who helped me aswell, learned a lot today :)

Vince · Accepted Answer · 2014-12-08 18:46:52Z

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

Collectives™ on Stack Overflow

JSon Array into HTML Select Option

4 Answers 4

6 Comments

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related