Json返回數組顯示在html表的jquery中

Question

在CodeIgniter控制器中返回下面的甲酸中的json，

{"r":[{"galleryid":"1","gname":"birthday","eventdate":"2016-07-20 00:00:00","totalphoto":"250","selectedphoto" :"100","glock":"0","userid":"1"},{"galleryid":"2","gname":"anniversary","eventdate":"2016-07-14 00:00:00","totalphoto":"500","selectedphoto":"251","glock":"0","userid":"1"}]}

並從控制器返回代碼：

     $this->load->model('gallery_model');
    $data['r'] = $this->gallery_model->gallery_data($userid);
    echo json_encode($data);

但在視圖中它只顯示： undefined

查看代碼：

<script type="text/javascript">

// Ajax post
$(document).ready(function () {
    $("input#displaygallery").on('click', function (event) {
        //var user_id = document.getElementById("userdropdown").value;
        //alert(user_id);

        event.preventDefault();
        var user_id = document.getElementById("userdropdown").value;
        jQuery.ajax({
            type: "POST",
            url: "<?php echo base_url(); ?>" + "admin_cont/gallery_controller/user_userdata",
            dataType: 'json',
            data: {userid: user_id},
            success: function (res) {
                //console.log( res );

                $.each(res, function (idx, obj) {
                    alert(obj.tagName);
                });
            }
        });
    });
});

</script>

Answer 1

嘗試：

JavaScript的：

$("input#displaygallery").on('click', function (event) {
    event.preventDefault();
    var user_id = document.getElementById("userdropdown").value;
    jQuery.ajax({
        type: "POST",
        url: "<?php echo base_url(); ?>" + "admin_cont/gallery_controller/user_userdata",
        dataType: 'json',
        data: {userid: user_id},
        success: function (res) {
            var html = "<table>";
            html += "<thead>";

            html += "<tr>";
            html += "<th>eventdate</th>";
            html += "<th>galleryid</th>";
            html += "<th>glock</th>";
            html += "<th>gname</th>";
            html += "<th>selectedphoto</th>";
            html += "<th>totalphoto</th>";
            html += "<th>userid</th>";
            html += "<tr>";

            html += "<thead>";
            html += "<tbody>";
            for (i = 0; i <= res.r.length - 1; i++) {
                html += "<tr>";
                html += "<td>" + res.r[i].eventdate + "</td>";
                html += "<td>" + res.r[i].galleryid + "</td>";
                html += "<td>" + res.r[i].glock + "</td>";
                html += "<td>" + res.r[i].gname + "</td>";
                html += "<td>" + res.r[i].selectedphoto + "</td>";
                html += "<td>" + res.r[i].totalphoto + "</td>";
                html += "<td>" + res.r[i].userid + "</td>";
                html += "<tr>";
            }
            html += "</tbody>";
            html += "</table>";
            $("your cointainer id or class name").html(html);
        }
    });
});