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

0

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

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

Вот запрос javascript get.

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

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

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

  • 0
    Можете ли вы опубликовать образец вывода консоли?
  • 0
    Вы не используете thingy в своей функции renderToDo ... можете ли вы предоставить вывод консоли?
Показать ещё 2 комментария
Теги:
get
deployd

2 ответа

0
Лучший ответ

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

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");

  });

});
Поделиться
1

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

Если это простой текст:

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

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

var $el = $('<li>')
$el.html(thingy);
Поделиться
  • 0
    хм это все еще, кажется, не работает. Я добавил новый код, который вы рекомендовали выше
  • 0
    Я добавил ссылку на него, работающий в локальном туннеле

Ещё вопросы

Сообщество Overcoder
Наверх
Меню