Add and retrieve elements using jQuery and AJAX

---

snippets/6/client/item_input_form.html

<hr>

<form>
<input name="text" id="text">
<input type="submit" id="add-item" value="Add item">
</form>

<div id="items"></div>

$(document).ready(function() {
    ...
    show_items();
    ...
})

snippets/6/client/show_items_with_javascript.js

function show_items() {
    jQuery.get('http://127.0.0.1:5000/api/v2/items', function(data) {
        var i, html;
        html  = '<ul>';
        console.log(data);
        for (i = 0; i < data["items"].length; i++) {
            html += '<li>' + data["items"][i]["text"] + '</li>';
        }
        html += '</ul>';
        $("#items").html(html);
    });
}

Data structure in Perl

{
  'items' => [
    {
      '_id' => {
        '$oid' => '556d6735a11460452f6e7601'
      },
      'text' => 'First Thing to do'
    },
    {
      '_id' => {
        '$oid' => '556d6735a11460452f6e7602'
      },
      'text' => 'one more'
    }
  ]
}