如何将我的 json 数据附加到选择列表中？答案

【问题标题】：How to append my json data into a selectlist?如何将我的 json 数据附加到选择列表中？
【发布时间】：2021-10-24 09:05:16
【问题描述】：

在 html 中有一个没有任何选项的选择列表。我将从 API 获取名称列表，并将它们作为选项附加到我的选择列表中。

这里是html代码：

<div id="example" role="application">
<div class="demo-section k-header">
    <select id="FeaturesSelect" multiple="multiple" data-placeholder="Select attendees...">
        
    </select>
</div>

这是我正在尝试的解决方案，但不起作用。

 $(document).ready(function () {
    var data = $.get("My API Address Here");
    $('#FeaturesSelect').empty();
    $.each(data,
        function(i, v) {
            $('#FeaturesSelect').append('<option value="' + v.id + '">' + v.title + '</option>');
        });
});

这里是 API 示例

[
{
    "id": "1",
    "title": "James"
},
{
    "id": "2",
    "title": "Robbert"
}

]

【问题讨论】：

举一些API响应的例子。
@SNSharma 完成 1
我可以用同样的代码渲染数据
@SuryaPrakashTumma 你的意思是我的代码适合你？
是的，我可以并且我已经模拟了数据

标签： javascript html jquery api

【解决方案1】：

Javascript 异步，因此您的代码不会等待 API 响应的到来。所以你需要使用 Promise 来等待响应。

请在此处查看工作代码

$(document).ready(function () {
    var data = $.get("https://jsonplaceholder.typicode.com/posts").then(data => {
        console.log(data)
    $('#FeaturesSelect').empty();
    $.each(data,
        function(i, v) {
            $('#FeaturesSelect').append('<option value="' + v.id + '">' + v.title + '</option>');
        });
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example" role="application">
<div class="demo-section k-header">
    <select id="FeaturesSelect" multiple="multiple" data-placeholder="Select attendees...">
        
    </select>
</div>

【讨论】：

【解决方案2】：

问题在于您的代码结构。由于您的数据是通过 AJAX 获取的，因此您的 .each 代码在执行时将没有数据。解决方法是将循环逻辑放在jquery get success 块中。

$(document).ready(function () {
    $('#FeaturesSelect').empty();
    $.get("My API Address Here").done(function(data){
        $.each(data,
            function(i, v) {
                $('#FeaturesSelect').append('<option value="' + v.id + '">' + v.title + '</option>');
            });
    });
});

【讨论】：

【解决方案3】：

您的代码没有问题。我可以看到它工作正常。

$(document).ready(function () {
    var data = [{"id": "1","title": "James"},{"id": "2","title": "Robbert"}];
    $('#FeaturesSelect').empty();
    $.each(data,
        function(i, v) {
            $('#FeaturesSelect').append('<option value="' + v.id + '">' + v.title + '</option>');
        });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="example" role="application">
<div class="demo-section k-header">
    <select id="FeaturesSelect" multiple="multiple" data-placeholder="Select attendees...">
        
    </select>
</div>

【讨论】：

这部分代码不起作用：var data = $.get("localhost/api/GetAllNames");