jQuery不是从JSON中提取数据并添加数据-我的代码有什么问题?

jQuery is not pulling data from a JSON and adding the data - What's wrong with my code?

本文关键字：数据 我的 代码 问题 什么 添加 JSON 提取 jQuery      更新时间：2023-09-26

我有一个JSON文件设置的数据，当用户在我的网站从下拉菜单中选择一种音乐类型，该音乐类型的歌曲(歌曲存储在JSON文件中，与艺术家一起)将显示在我的网站上的组合框。遗憾的是，事情没有按计划进行。

我知道这个错误是基于我所犯的一些错误，但我不知道确切的位置!我的浏览器控制台显示:"Uncaught TypeError: Cannot read property 'undefined of undefined" 

var selectedValue = dropDown.options[dropDown.selectedIndex].value;

然而，我不知道这是什么意思，或者它是否实际上是一个合法的运行时错误。无论如何，这是我的代码。如果你们这些了不起的人能检查一下我的代码，看看你们认为是什么导致我的代码没有按照我想要的方式运行(详见第一段):)

<标题> JSON h1> JavaScript h1> HTML 
<!-- Drop Down -->
<select id="music-genre">
    <option id="rock" value="rock">Rock</option>
    <option id="alternative" value="alternative">Alternative</option>
</select>
<!-- Combo Box -->
<select multiple id="song">
    <!-- "Select one or more" is disabled because I don't want users selecting it -->
    <option value="select" disabled>Select one or more</option>
</select>

您从返回的JSON中想要的数据在library数组中，因此您需要使用data.library。

还请注意，target将是一个jQuery对象，没有innerHTML属性，所以你需要使用append代替:

$.each(data.library, function(key, val) {
    target.append('<option value="' + val.title + '">' + val.title + 'by ' + val.artist + '</option>');
})

最后，正如其他人提到的，你可以在select元素上使用val()属性来获得所选值:

var selectedValue = $("#music-genre").val();

试着这样使用:

JSON: 

{
"library": {
    "rock": [
        {
            "title": "Your Love",
            "artist": "The Outfield"
        },
        {
            "title": "Voodoo Child",
            "artist": "Jimi Hendrix"
        },
        {
            "title": "When I'm Gone",
            "artist": "Three Doors Down"
        }
    ],
    "alternative": [
        {
            "title": "Jumper",
            "artist": "Third Eye Blind"
        },
        {
            "title": "One Week",
            "artist": "Barenaked Ladies"
        },
        {
            "title": "The Middle",
            "artist": "Jimmy Eat World"
        }
    ]
}
JAVASCRIPT: 

$(function(){
    // Declare our needed variables
    var dropDown = $("#music-genre");    // <select id="music-genre">...</select>
    // var selectedValue = dropDown.options[dropDown.selectedIndex].value;
    var target = $('#song');    // <select multiple id="song">...</select>
    dropDown.on("change", function(){
        var genre = $(this).val();
        var html = '';
        $.getJSON("test.json", function(data){
            $.each(data.library[genre], function(key, val){
                html += '<option value="' + val.title + '">' + val.title + 'by ' + val.artist + '</option>';    // Save whole html in a var
            }); // END $.each*/
            target.html(html);  // append it in target div
        }); // END $.getJSON
    });
}); // END ready()

尝试使用:

var selectedValue = dropDown.find(':selected').val();

或:

var selectedValue = dropDown.val();

代替:

var selectedValue = dropDown.options[dropDown.selectedIndex].value;

因为dropDown是一个jQuery对象，需要你在这里使用jQuery方法。

还要注意，data包含library数组，因此您需要访问该数组以获取其中的值:

$.each(data.library, function(key, val) {
    target.innerHTML += '<option value="' + val.title + '">' + val.title + 'by ' + val.artist + '</option>';
});
相关文章：