将 JSON 数组转换为 HTML 选择选项答案

【问题标题】：JSon Array into HTML Select Option将 JSON 数组转换为 HTML 选择选项
【发布时间】：2015-02-06 11:48:06
【问题描述】：

所以当谈到 javascript 时，我是一个真正的菜鸟。我尝试了网站上的所有解决方案，并从谷歌检查了其他一些东西，但没有找到适合我的东西。

我必须创建一个 json 数组并将其导入到选择选项列表中。目标是从列表框中选择音乐标题。

这是我当前的 html 代码（如果您需要更多代码，请告诉我，现在我只会发布我认为必要的内容）：

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

编辑：这是更新的代码，但它仍然不起作用。

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

}

【问题讨论】：

注意：使用JSON.parse(titelliste) 而不是eval('(' + titelliste + ')')。
你在做options[j].Text和options[j].Value。看看你的阵列。对象没有这些属性。
谢谢，但没用。但是，如果我理解正确，您希望我将 options[j].Text 替换为 options[j].Titel 对吗？
是的。你需要从你的对象中获取数据，但是它被命名为:-)

标签： javascript jquery html arrays json

【解决方案1】：

您也可以使用map()。该函数的参数val是一个包含Produktid和Titel的对象。所以你可以使用map() 函数。这是一个例子：

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>

参考：

map()

另外看看另一个迭代 - each()

【讨论】：

不要像那样附加字符串，而是使用适当的函数来避免时髦字符（如文本中的引号）的问题：jQuery("<option></option>").val(val.Produktid).html(val.Titel)
@MH2K9, 您使用的是map()，但采用each() 构造的样式。通常，映射将数组或对象中的项目“翻译”/返回到新的项目数组中，将调用map() 的结果数组返回。目前，您没有在map() 函数中返回项目，而是迭代地构建结果字符串......更适合each() 的模式。我会编辑你的答案，因为我真的很喜欢你基于地图的解决方案（并且可以改进）。可以在jsfiddle.net/r28Ly010进行测试。

【解决方案2】：

这是一个纯 JavaScript 选项：

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

&lt;select id="Select" name="Titel"&gt;&lt;/select&gt;

从您的代码中可以明显看出您不熟悉 jQuery 的工作原理，因此我建议您坚持使用纯 JavaScript，直到您完全了解该语言本身。

我在这里做的很简单：

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

首先，我创建一个for 循环来循环遍历titelliste 数组中包含的每个JSON 对象。

然后，在每次迭代中：

我将一个变量分配给select 元素。
创建一个option 元素
将选项的text 属性分配给JSON 对象中的Titel 值
将选项的value 属性分配给JSON 对象中的Produktid 值
将新创建的选项添加到select 元素

我希望这可以帮助您更多地了解代码中发生的事情。

【讨论】：

谢谢，我试过你的代码，但它对我不起作用。我网站上的选择框中仍然没有选项。
@Atiyo 如果您只是复制/粘贴我的 JavaScript 代码，它不会完全适用于您的 HTML - 我将选择元素的 ID 从 select 更改为 Select。我更喜欢将我所有的 ID 都大写。
是的，我在尝试之前检查了它并更改了所有内容，使其适合我的代码。还是不行，我感觉我的 pc/eclipse 出了点问题。
如果你运行上面的sn-p，代码是否工作？如果是这样，那么您的代码中可能有其他地方引发了错误，导致您的代码的其余部分无法执行。
是的，如果我运行 sn-p，代码就可以工作。选择选项在表格中是否有问题？我是否必须在 js 代码中添加类似 .table 之类的东西？

【解决方案3】：

void main 的回答非常简洁明了。

没有必要使用 eval 因为变量已经是一个对象数组。您的选择框应该是空的，因为无论如何您都要向其中添加元素。

这是一个仍在使用 javascript for 循环的 jsfiddle：

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

【讨论】：

【解决方案4】：

您的代码中需要更改一些内容。

您不需要评估 JSON，只要您知道它是有效的就可以了。
<option> 标记没有“文本”属性。在 jQuery 中，您应该使用 $('.selector').text() 来更改标签的内部文本
您的 JSON 对象具有 Titel 和 Produktid 作为属性，而不是文本和值。
小心...您的<select> 标签的id 属性与您在$('#mySelect').append(newOption); 中指定的属性不同（您的选择是id="select" 而不是"mySelect"）。

这是一个有效的fiddle。

【讨论】：

谢谢我终于让它工作了 :D 不知道是什么问题，我之前尝试过你的解决方案，它没有用，但现在它可以了。感谢所有帮助过我的人，今天学到了很多:)