Ajaxを利用して動的にチェックボックスを生成させたい

DBから取得したJasonデータを利用してチェックボックスを生成させたいのですが、
うまくいきません。

どのようにすれば良いでしょうか？
教えてください。
jasonデータは下記のようになっています。
{"001001":"\u30d4\u30f3\u30af","001002":"\u8d64"}

$(function(){
$('#pd').change(function(){
var mark = $('#mark').val();
var dt = new Date().getTime();
$.ajax({
type: "POST",
url: "/hoge/pg001/" + dt,
data: {"mark":mark},
dataType: "json",
cache: false,
success: function(data, status){
if(data.length > 0){
for(var i in data){
var $input = $('<input type="checkbox" />').attr({name: 'color[' + data[i].code + ']'}).attr("value",'1' );
var $label = $('<label>' + data[i].name + '</label>');
$("table#table_sp td#place").html($input).append($label);
}
}
},
error: function(XMLHttpRequest, status, errorThrown){
alert("エラーが発生しました！");
}
});
});
});

という感じでテープるのtd部分にチェックボックスを付け加えたいです

行動規範の内容に同意します

回答2件

ベストアンサー

問題点が複数ある為、少し長くなりました。

1. 連想配列の取得が間違っている

javascript
1if(data.length > 0){ 
2  …
3}

連想配列からlengthは取得できない為、forの処理に入っていません。連想配列の確認は

javascript
1data instanceof Object

で確認できます。

2. JSONデータの取得方法が間違っている

javascript
1var $label = $('<label>' + data[i].name + '</label>');

JSONデータには、data[i]には、nameキーは指定されていない為、取得できません。
data[i]で値が取得できます。

3. テーブルのIDが間違っている

html
1<table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="tabale_sp" class="tbl_info">

id=table_spが正しいと思います。

4.For文の処理が間違っている

javascript
1for(var i in data){
2    var $input = $('<input type="checkbox" />').attr({name: 'color[' + data[i].code + ']'}).attr("value",'1' );
3    var $label = $('<label>' + data[i].name + '</label>');
4    $("table#table_sp td#place").html($input).append($label);
5}

同じtd#placeの変更をしているため、項目は増えないです。

あと、HTML生成時は、テキストで一気に書いた方がいいです。
慣れてきてからjQueryで書かないと混乱すると思います。

修正例

javascript
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="UTF-8">
5        <title></title>
6        <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
7    </head>
8    <body>
9        <script>
10            $(function(){
11                $('#pd').click(function(){
12                    var mark = $('#mark').val();
13                    var dt    =    new Date().getTime();
14                    $.ajax({
15                        type: "POST",
16                        // url: "/hoge/pg001/" + dt,
17                        url: './a.json',
18                        data: {"mark":mark},
19                        dataType: "json",
20                        cache: false,
21                        success: function(data, status){
22                            for(var i in data){
23                                var html = '<label><input type="checkbox" name="color['+i+']" value="1">'+data[i]+'</label>';
24                                $("table#table_sp td#place").append(html);
25                            }
26                        },
27                        error: function(XMLHttpRequest, status, errorThrown){
28                            alert("エラーが発生しました！");
29                        }
30                    });
31                });
32            });
33        </script>
34        <table style="text-align:left;" border="1" cellpadding="2" cellspacing="2" id="table_sp" class="tbl_info">
35            <button id="pd">取得</button>
36            <tbody>
37                <tr id="place">
38                    <th>サンプル</th>
39                    <td id="place"></td>
40                </tr>
41            </tbody>
42        </table>
43
44    </body>
45</html>
46