CODEWITHSUNDEEP
javascriptjqueryhtmlarraysjson
Atiyo
Atiyo

Reputation: 13

JSon Array into HTML Select Option

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

}

Upvotes: 1

Views: 14046

Answers (4)

MH2K9
MH2K9

Reputation: 12039

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:

Also look at another iteration - each()

Upvotes: 3

Howard Renollet
Howard Renollet

Reputation: 4739

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.

Upvotes: 4

The CodePunker
The CodePunker

Reputation: 195

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.

Upvotes: 0

Vince
Vince

Reputation: 1851

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

Upvotes: 0

Related Questions