将 json 数据插入已部署的 <p> 标记（无后端）答案

【问题标题】：Inserting json data into <p> tags with deployd (nobackend)将 json 数据插入已部署的 <p> 标记（无后端）
【发布时间】：2013-12-21 05:52:10
【问题描述】：

我正在使用 javascript Get 调用来获取我在部署中创建的集合的 json 数据。我直接从部署的后端获得了这段代码。它为我提供了一个放入控制台的 json 数组，但我远未弄清楚如何解析 json，不确定这是否是正确的术语，并将其输出到集合中每个项目的单独 p 标签中。

我还包含了 jQuery，我假设根据我在网上看到的内容，它使这样做更容易。此外，如果有比 jQuery 更好的库来学习这样做，或者对部署更有意义的东西，比如 Angular，我很乐意被引导到正确的方向。

这是提供的 javascript 获取请求。

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

我尝试查看已部署站点上的示例应用程序，看看他们是如何做到的，但还没有完全弄清楚这是我下面的失败尝试

<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

【问题讨论】：

您可以发布控制台输出的示例吗？
你没有在你的renderToDo函数中使用thingy...你能提供控制台的输出吗？
听起来很奇怪，但是控制台没有输出。
我添加了一个指向本地隧道的链接，以便您可以实时查看站点并检查控制台。

标签： javascript jquery json get deployd

【解决方案1】：

尝试在代码中添加“thingy”，以便显示从集合返回的项目；只需确保正在返回一个集合即可。

如果是纯文本：

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

如果 thingy 包含带有文本的 html：

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

【讨论】：

嗯，它似乎仍然无法正常工作。我已经添加了您在上面推荐的新代码
我添加了一个在本地隧道上运行的链接

【解决方案2】：

我最终根据this 堆栈溢出答案完成了此操作

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

  });

});

【讨论】：