Вставка данных json в теги<p>с помощью deployd (nobackend)

Я использую JavaScript-вызов Get, чтобы получить данные json для коллекции, которую я создал в deployd. Я получил этот код прямо из бэкэнда деплойда. Он дает мне массив json, который помещается в консоль, но я далек от того, чтобы понять, как анализировать json, не уверенный, что это правильный термин, и выводить его в отдельные теги p для каждого элемента в коллекции.

Я также включил jQuery, и, исходя из того, что я изучил в Интернете, я предполагаю, что это делает это намного проще. Также, если есть лучшая библиотека, чем jQuery, чтобы научиться это делать, или что-то, что имеет больше смысла для deployd, скажем, Angular, я бы хотел, чтобы меня направили в правильном направлении.

Вот предоставленный запрос получения javascript.

dpd.things.get(function (result, err) {
  if(err) return console.log(err);
  console.log(result);
});

Я попытался посмотреть пример приложения с сайта Deployd, чтобы увидеть, как они это сделали, но не совсем понял, вот моя неудачная попытка ниже

<body>
    <h1>Welcome to Deployd!</h1>
    <p>You've just created a Deployd app. You can add front-end files in the <code>public</code> folder.</p>
    <p>If you're new to Deployd, have a look at the <a href="http://docs.deployd.com/docs/getting-started/what-is-deployd.md">Getting Started Guide</a> or <a href="http://docs.deployd.com/docs/getting-started/your-first-api.md">Hello World Tutorial<a>.</p>
    <p class="hide" id="empty">You don't have any todos! Add one now:</p>
    <ul id="todos" class="unstyled"></ul>
</body>
<script> 
    function getTodos() {
        // Get all todos
        dpd.things.get(function(result, err) {
          if (err) {
            // Alert if there's an error
            return alert(err.message || "an error occurred");
          }

          if (!result.length) {
            $('#empty').show();
          }

          // todos is an array
          result.forEach(function(thingy) {
            renderTodo(thingy);
          });
        });
      }

       function renderTodo(thingy) {
        var $el = $('<li>');
            // $label = $('<label class="checkbox">')});
        $el.appendTo('#todos');
        $('#empty').hide();
      }
</script>

НОВЫЙ РЕКОМЕНДУЕМЫЙ КОД НЕ РАБОТАЕТ

function getTodos() {
    // Get all todos
    dpd.things.get(function(result, err) {
      if (err) {
        // Alert if there's an error
        return alert(err.message || "an error occurred");
      }

      if (!result.length) {
        $('#empty').show();
      }

      // todos is an array
      result.forEach(function(thingy) {
        renderTodo(thingy);
      });
    });
  }

   function renderTodo(thingy) {
    var $el = $('<li>');

    $el.text(thingy);

    $el.appendTo('#todos');
    $('#empty').hide();
  }

Вот сайт, работающий на localtunnel, так что вы можете увидеть консоль. https://twig.localtunnel.me/

Источник

2 ответа

Решение

Я закончил тем, что делал это в конце на основе этого ответа переполнения стека

dpd.things.get(function(result, error) {
  console.log(result);

  $.each(result, function(i,result){
  content = '<p id=" ' + result.name + ' ">' 
  + result.name + '</p>' + '<p>' + result.about + 
  '</p>' + '<p>' + result.id + '</p>'
  $(content).appendTo("#test");

  });

});
Источник

Попробуйте добавить в код 'thingy', чтобы он отображал элементы, возвращенные из коллекции; Просто убедитесь, что коллекция возвращается.

Если вещь - простой текст:

var $el = $('<li>')
$el.text(thingy);

Если штука включает html с текстом:

var $el = $('<li>')
$el.html(thingy);
Источник
Другие вопросы по тегам