Get selected checkboxes from ajax get request

[muhfred]

I’m trying to get the checkboxes checked based on data coming from the server through an ajax get request:

var GetTodos = (function () {
    //GET/READ 
       return $.ajax({
            url: '/api/Todos/GetTodos',
            contentType: 'application/json',
            success: function (todos) {
                var tbodyEl = $('tbody');
                $.each(todos, function (i, todo) {
                    if (!todo.isCompleted)
                        $('#myCheckbox').prop('checked', false);
                    else
                        $('#myCheckbox').prop('checked', true);
                    tbodyEl.append('\
                        <tr>\
                        	<td><input type="checkbox" value="'+todo.id+'" id="myCheckbox" checked/></td>\
                            <td class="id">' + todo.id + '</td>\
                            <td><input type="text" class="name" value="' + todo.text + '"></td>\
                            <td>\
                                <button id="editBtn" class="btn btn-warning">Update</button>\
                                <button id="deleteBtn" class="btn btn-danger">Delete</button>\
                            </td>\
                        </tr>\
                    ');
                });
            }
        });
});

---

so i’m sending an ajax get request to get json data and the following response is

[
  {
    "id": 1,
    "text": "Walk the dog",
    "isCompleted": false
  },
  {
    "id": 4,
    "text": "go out with friends",
    "isCompleted": false
  },
  {
    "id": 5,
    "text": "touch the fishy",
    "isCompleted": true
  }
]

---

and the output is like this

---

so the checkboxes doesn’t get checked properly. If someone can help me out with this it will be much appreciated, thanks

[muhfred]

this is the answer in case someone had the same issue

$.each(todos, function (i, todo) {
    var checked = '';

    if (todo.isCompleted)
        checked = 'checked';

    tbodyEl.append('\
        <tr>\
            <td><input type="checkbox" value="'+todo.id+'" class="myCheckbox" '+checked+'/></td>\
            <td class="id">' + todo.id + '</td>\
            <td><input type="text" class="name" value="' + todo.text + '"></td>\
            <td>\
                <button id="editBtn" class="btn btn-warning">Update</button>\
                <button id="deleteBtn" class="btn btn-danger">Delete</button>\
            </td>\
        </tr>\
    ');
});