Step-by-step JayStorm: Step 1a - list items with jQuery

List todo items with nothing but jQuery

by JayData

HTML

<h3>All Todo Items jQuery</h3>
<ul id="jq-todo-list"></ul>

CSS

body {
    font-family: 'Calibri';
}

ul { margin-left: 15px; }

h3 {
    margin-top:15px;
    font-weight:bold;
}

input[type=submit] {width:80px;height:25px}
input[type=text] {width:280px;height:25px}

form { margin-left:15px; margin-top:15px}

JavaScript

var ownerId = "a0f577b9-8b98-4685-af6d-98943da6448f";
    var appId = "9fe72773-3e38-4c4d-af21-6716ec70876c";

    //all todo items with jQuery
$.getJSON("https://open.jaystack.net/" + ownerId + "/" + appId + "/api/mydatabase/TodoItems",
          function(response) {
              response.d.results.forEach(function(item) {
                  $('#jq-todo-list').append($('<li>' + item.Task + '</li>'));
              });
          });