语义UI搜索窗体无法获取对象数据。

Question

我正在从一个端点中提取一个国家列表。我认为我正确地构建了对象，但我在搜索表单中没有得到任何结果，但是在内联声明content[]的情况下，工作正常。

API JSON响应看起来像这样。

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

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

有什么办法吗？

Answer 1

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

$(".ui.search").search() 被调用之前 $.getJSON() 已返回数据。

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

/*
$.getJSON() is shorthand for

$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
})

which is asynchronous.

See https://api.jquery.com/jQuery.getJSON/
*/

// start the ajax call
$.getJSON(

  // URL from which we're fetching JSON data
  "/getCountries", 

  // the "success" callback function to be executed after a successful request
  function (data) {
    parseData(data);
  }
);

// begins executing immediately after .getJSON()
// without waiting for data to return
$('.ui.search').search({
  // content is still empty at this point, since data hasn't come back yet
  source: content
})

解决方案

我们要打电话 .search() 之后 异步 .getJSON() 调用返回的数据。

由于我们已经在使用回调函数，该函数在我们得到JSON数据返回后执行，让我们把所有的 data 的东西在那个回调里面。

在这里，我做了两个较小的函数：一个是将数据解析成我们想要的形式，另一个是将数据解析成我们想要的形式。content 有，一个叫 .search() 来初始化包含该内容的搜索表单。

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

// set up empty array
var content = [];

// when this is called, use the value of the content array
function populateSearch() {
  $(".ui.search").search({
    source: content
  });
}

// when this is called, push data into the content array
function parseData(data) {
  for (var item of data) {
    content.push({ title: item.country });
  }
}

$.getJSON("/getCountries", function (data) {
  // first parse data into the content array
  parseData(data);

  // then call the function that sets up search
  populateSearch();
});

现代化的ES6级Javascript

你可以这样写得更简洁。

function populateSearch(data) {
  // use .map() to transform our data array to a new array in one step
  const content = data.map(item => (
    { title: item.country }
  ));

  // init the search form with our new content array
  $(".ui.search").search({
    source: content
  });
}

$.getJSON("/getCountries", function (data) {
  populateSearch(data);
});

Answer 2

你可以用普通的javascript简化一下代码。

var content = [];

$.getJSON("/getCountries", function (data) {
  parseData(data);
});

function parseData(data) {
  for (var item of data) {
    content.push({ title: item.country });
  }
}

$(".ui.search").search({
  source: content,
});

我用这个来写数据，假设它是一个对象数组。

const data = [
  { country: "Albania", code: "AL" },
  { country: "Algeria", code: "DZ" },
  { country: "Andorra", code: "AD" },
  { country: "Angola", code: "AO" },
];