0

I am using a javascript Get call to grab the json data for a collection I created in deployd. I got this code directly from the deployd backend. It gives me a json array that is put into the console, but I am far from figuring out how to parse the json not sure if thats the right term, and output it into seperate p tags for each item within in the collection.

I also have included jQuery and I am assuming based on what I have looked into online that it makes it much easier to do so. Also if there is a better library than jQuery to learn to do this with, or something that makes more sense for deployd lets say Angular, I would love to be steered in the right direction.

Here is the javascript get request provided.

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

I have tried looking at a example app off the deployd site to see how they did it but havent quite figured it out here is my failed attempt below

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

NEW RECCOMENDED CODE NOT WORKING

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();
  }

Here is the site running on localtunnel so you can see the console. https://twig.localtunnel.me

4

2 回答 2

1

Try adding 'thingy' in the code so it will display the items returned from the collection; Just make sure a collection is being returned.

If thingy is plain text:

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

If thingy includes html with text:

var $el = $('<li>')
$el.html(thingy);
于 2013-12-20T02:21:26.687 回答
0

I ended up doing this in the end based off of this stack overflow answer

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

  });

});
于 2013-12-20T21:52:10.547 回答