javascript - 以字符串形式返回一个元素 输出未定义

Question

所有代码都在这个jsfiddle中，问题是该函数没有返回预期值，但它确实将其打印在控制台上，我不确定我做错了什么，有什么想法吗？

编辑:这就是所有代码，我返回 html 但从未获得其值

//Returns all assistants to specific event
function getAssistants(id) {
let uri = "https://api.myjson.com/bins/uqndk";
$.getJSON(uri, function(data) {
let html = "";

$.each(data.events[id].assistants, function(index, value) {
  if (value == 'undefined' || value == null) {
    html = '<li class="collection-item">No hay asistentes registrados.</li>';
  } else {
    html += '<li class="collection-item">' + value.name + '</li>';
  }
});

//console.log(html);

return html;
});
}

$("#assistants").append(getAssistants(1));

Answer 1

问题发生是因为您尝试异步获取返回结果，但实际上它是异步的

在此处查看代码中的编辑:

//Returns all assistants to specific event
function getAssistants(id) {
  let uri = "https://api.myjson.com/bins/uqndk";
  $.getJSON(uri, function(data) {
    let html = "";

    $.each(data.events[id].assistants, function(index, value) {
      if (value == 'undefined' || value == null) {
        html = '<li class="collection-item">No hay asistentes registrados.</li>';
      } else {
        html += '<li class="collection-item">' + value.name + '</li>';
      }
    });
    
    //console.log(html);

    $("#assistants").append(html);
  });
}

getAssistants(1);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="assistants" class="collection">
<!-- <li class="collection-item">John Smith</li> -->
</ul>

在这个解决方案中，我更改了您的代码以将结果放入 get block 中......以便它可以工作......

另一个解决方案:您也可以通过在 ES6 中使用 async/await、promise ...等来解决此问题，请检查此示例:Example