Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
{
"todoitem": [
{
"id": 1,
"item": "first todo",
"complete": true
},
{
"id": 2,
"item": "second todo",
"complete": false
},
{
"id": 3,
"item": "third todo",
"complete": false
}
]
}
$(document).ready(function() {
$.getJSON('http://localhost:3000/todoitem', updateFeedback);
function updateFeedback(data) {
let outPut = '';
$.each( data, function( i, todo ) {
outPut += `
<li id=${todo.id} class="list-group-item d-flex justify-content-between align-items-center ">
${todo.item}
<div class="action-btn ml-auto d-flex align-items-center">
<i class="mx-2 fa fa-edit edit"></i>
<i class="mx-2 fa fa-trash-o delete"></i>
<input class="mx-2" type="checkbox">
</div>
</li>
`;
$('.list-group').html(outPut);
});
}
$('#todo-form').submit(function (e) {
e.preventDefault();
$.post('http://localhost:3000/todoitem', {
item: $('#item-input-value').val(),
complete: false
}, updateFeedback);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment