Вернуть элемент как строку выводит undefined

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 ... так, чтобы он работал ...

Другое решение: Вы также можете решить эту проблему, используя async / await в ES6, обещание ... и т.д., проверьте этот пример: Пример

Answer 2

Можете ли вы изменить код как

insted of return html; in function --> $("#assistants").append(html);

on function call just call function like : getAssistants(1);

проверить скрипку https://jsfiddle.net/jsaf1btz/2/

Answer 3

Все, что вы делаете, это устанавливаете переменную.Вам нужно на самом деле console.log это:

$.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);
});