Javascript 语义UI搜索表单未获取对象数据

我正在从一个端点提取一个国家列表。我认为我构造的对象是正确的，但是在搜索表单中没有得到任何结果，但是使用content[]的内联声明可以很好地工作

API JSON响应如下所示：

{country: "Albania", code: "AL"}
{country: "Algeria", code: "DZ"}
{country: "Andorra", code: "AD"}
{country: "Angola", code: "AO"}

---

有什么想法吗？

您可以使用简单的javascript简化代码：

var content=[]；
$.getJSON（“/getCountries”，函数（数据）{
解析数据（数据）；
});
函数解析数据（数据）{
对于（数据的var项）{
content.push（{title:item.country}）；
}
}
$（“.ui.search”）.search({
资料来源：内容，
});

我将其用于数据，假设它是一个对象数组：

const数据=[
{国家：“阿尔巴尼亚”，代码：“AL”}，
{国家：“阿尔及利亚”，代码：“DZ”}，
{国家：“安道尔”，代码：“AD”}，
{国家：“安哥拉”，代码：“AO”}，
];

在我看来像是一个异步问题。

$（“.ui.search”）.search（）

在

$.getJSON（）

返回数据之前被调用

让我们分析一下发生了什么：

/*
$.getJSON（）是
$.ajax({
数据类型：“json”，
url:url，
数据：数据，
成功：成功
})
这是异步的。
看见https://api.jquery.com/jQuery.getJSON/
*/
//启动ajax调用
$.getJSON(
//从中获取JSON数据的URL
“/getCountries”，
//请求成功后要执行的“success”回调函数
功能（数据）{
解析数据（数据）；
}
);
//在.getJSON（）之后立即开始执行
//无需等待数据返回
$（'.ui.search'）.search({
//此时内容仍然为空，因为数据尚未返回
资料来源：内容
})

解决方案 我们需要在async

.getJSON（）

调用返回数据后调用

.search（）

。

因为我们已经在使用回调函数，该函数在我们获取JSON数据后执行，所以让我们在回调函数中执行所有的

数据
操作

在这里，我创建了两个较小的函数：一个用于将数据解析为我们希望
content
具有的形式，另一个用于调用
.search（）
以使用该内容初始化搜索表单

现在我们可以在回调函数中调用这两个函数，我们知道我们已经得到了数据

//设置空数组
var内容=[]；
//调用此函数时，请使用内容数组的值
函数populateSearch（）{
$（“.ui.search”）.search({
资料来源：内容
});
}
//调用此函数时，将数据推送到内容数组中
函数解析数据（数据）{
对于（数据的var项）{
content.push（{title:item.country}）；
}
}
$.getJSON（“/getCountries”，函数（数据）{
//首先将数据解析到内容数组中
解析数据（数据）；
//然后调用设置搜索的函数
大众搜索（）；
});



现代化到ES6级Javascript
你可以这样写得更简洁一些：

函数populateSearch（数据）{
//使用.map（）一步将数据数组转换为新数组
const content=data.map（项=>(
{标题：item.country}
));
//使用新的内容数组初始化搜索表单
$（“.ui.search”）.search({
资料来源：内容
});
}
$.getJSON（“/getCountries”，函数（数据）{
大众研究（数据）；
});
谢谢@Ron。相同问题：/I我提供的数据是通过/getCountries端点返回的JSON格式
var content = [];
$.getJSON('/getCountries', function(data){
    $.each(data, function(key, value){
        $.each(value, function(key, value){
            if (key == 'country') {
                content.push({ title: value})
            }
        })
    })
})

$('.ui.search')
  .search({
      source: content
  })