How to show appended checkbox and automatically checked after ajax call - php

Question

I have some problem with to display my appended checkbox in ajax call, this is my json result
[{"nama":"Food","idkategori":"1","dicek":"iya"},{"nama":"Fashion","idkategori":"2","dicek":"iya"},{"nama":"Beverages","idkategori":"3","dicek":"iya"},{"nama":"Art","idkategori":"4","dicek":"tidak"},{"nama":"Music","idkategori":"5","dicek":"tidak"},{"nama":"Technology","idkategori":"6","dicek":"tidak"},{"nama":"Smartphone","idkategori":"7","dicek":"tidak"},{"nama":"Computer","idkategori":"8","dicek":"tidak"},{"nama":"Games","idkategori":"9","dicek":"tidak"},{"nama":"Movies","idkategori":"10","dicek":"tidak"},{"nama":"Sports","idkategori":"11","dicek":"tidak"},{"nama":"Books","idkategori":"12","dicek":"tidak"}]
there is an checking in my query, if checkbox has been checked. value checkbox save to database, and I want to show my all checkbox which checked or not checked.
this is my ajax code
$.ajax({
url: host+'/skripsi3/phpmobile/appendfilter.php',
data: { "id": user},
dataType: 'json',
success: function(data, status){
$.each(data, function(i,item){
//alert("here");
$("#appendfilter").append('<input class="kategoriFilter" type="checkbox" value="'+item.nama+'" name="cektambah" id="'+item.idkategori+'"><label for="'+item.idkategori+'">'+item.nama+'</label>').trigger("create");
if(item.dicek=="iya")
{
$("#"+item.idkategori).prop('checked', true);
}
else if(item.dicek=="tidak")
{
$("#"+item.idkategori).prop('checked', false);
}
});
},
error: function(e){
//alert(e);
}
});
and this is my appendfilter.php
<?php
session_start();
include "config.php";
$user=mysql_real_escape_string($_GET["id"]);
$result=mysql_query("SELECT * from filtering WHERE id_tenant='$user'") or die(mysql_error());
if (!empty($result))
{
while ($row=mysql_fetch_array($result))
{
$tempfilter[] = $row['filter'];
$q="select 'iya' as dicek,kategori.id_kategori,kategori.nama from kategori WHERE id_kategori IN (".implode(',',$tempfilter).") UNION ALL select 'tidak' as dicek,kategori.id_kategori,kategori.nama from kategori where id_kategori NOT IN (".implode(',',$tempfilter).") ";
//echo $q;
$result2 = mysql_query($q) or die(mysql_error());
if (!empty($result2))
{
while ($row2=mysql_fetch_array($result2))
{
$fetchkategori[] = array
(
'nama' => $row2['nama'],
'idkategori' => $row2['id_kategori'],
'dicek' => $row2["dicek"]
);
}
}
}
}
mysql_close($con);
header('Content-Type:application/json');
echo json_encode($fetchkategori);
?>
Hope someone can help me solve my problem.

Answer 1

Try to check if your html is ready. Supposing that you get your json object correctly :
$(document).ready(function(){
var data =[
{"nama":"Food","idkategori":"1","dicek":"iya"},
{"nama":"Fashion","idkategori":"2","dicek":"iya"},
{"nama":"Beverages","idkategori":"3","dicek":"iya"},
{"nama":"Art","idkategori":"4","dicek":"tidak"},
{"nama":"Music","idkategori":"5","dicek":"tidak"},
{"nama":"Technology","idkategori":"6","dicek":"tidak"},
{"nama":"Smartphone","idkategori":"7","dicek":"tidak"},
{"nama":"Computer","idkategori":"8","dicek":"tidak"},
{"nama":"Games","idkategori":"9","dicek":"tidak"},
{"nama":"Movies","idkategori":"10","dicek":"tidak"},
{"nama":"Sports","idkategori":"11","dicek":"tidak"},
{"nama":"Books","idkategori":"12","dicek":"tidak"}];
$.each(data, function(i,item){
$("#appendfilter").append('<input class="kategoriFilter" type="checkbox" value="'+item.nama+'" name="cektambah" id="'+item.idkategori+'"><label for="'+item.idkategori+'">'+item.nama+'</label>').trigger("create");
if(item.dicek=="iya")
{
$("#"+item.idkategori).prop('checked', true);
}
else if(item.dicek=="tidak")
{
$("#"+item.idkategori).prop('checked', false);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="appendfilter"></div>