使用deployd(nobackend)将json数据插入<p>标签</p>

时间:2013-12-20 02:02:23

标签: javascript jquery json get deployd

我正在使用javascript Get调用来获取我在deployd中创建的集合的json数据。我直接从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网站上查看一个示例应用程序,看看他们是如何做到这一点的但是还没想到这里是我在下面的失败尝试

<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 个答案:

答案 0 :(得分:1)

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

如果thingy是纯文字:

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

如果thingy包含带文字的HTML:

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

答案 1 :(得分:0)

我最终根据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");

  });

});