Uncaught TypeError: Cannot read property 'create' of undefined while trying to loop through json array in jquery

Question

I keep getting the error: Uncaught TypeError: Cannot read property 'create' of undefined I did a console.log and it returned the array. example:

[
  {
    "comment_id":"702542",
    "parcel_id":"166865",
    "user_id":"10034",
    "comment":"2014+ LCV RESPONSE - FINAL LETTER (07-JAN-2014) RECEIVED 01\/13\/2014 COMPLETED AS PRIMARY RESIDENCE - LEGAL CLASS NOT UPDATED.",
    "date_created":"2014-01-30 01:00:00"
  }
]

I can't seem to get it to populate the table in the jquery dialog box when the user clicks on the view comments button.

Here's the jquery code: updated

    $('#ViewComments').click(function() {
        $("#InsertComment").focus();
        //view/add comments dialog
        $( "#CommentsDialog" ).dialog({
            height:320,
            width: 500,
            modal:true,
            closeOnEscape:true,
            buttons: [ { text: "Close", click: function() { $(this).dialog( "close" ); } } ]
        });
        var parcel_id = $('#ParcelId').val();
        $.ajax({
            url: "classes/get-comments.php?parcel_id=" + parcel_id,
            type: "GET",
            data: { parcel_id : parcel_id },
            error: function(SMLHttpRequest, textStatus, errorThrown){
                    alert("An error has occurred making the request: " + errorThrown);
            },
            success: function(comments){
                //do stuff here on success
                //console.log(comments);
                for(var i=0; i < comments.length; i++){
                    var tr = $('<tr></tr>');
                    tr.append("<td>" + comments[0].date_created + "</td><td style=\"text-align:right;\">" + comments[0].user_id + "</td></tr><tr><td colspan=\"2\">" + comments[0].comment + "</td>");
                    $('#CommentResults').append(tr);
                    //console.log(tr);
                }
            }
        });
    });//end view comments click function

HTML:

    <div id="CommentsDialog" title="Comments">
        <div style="width:98%;height:75%; margin-bottom:5px; background-color: #fff; padding:5px;" id="Comments" name="Comments">
            <table id="CommentResults" name="CommentResults"></table>               
        </div>
        <input type="text" style="width:65%;margin-top:5px;" id="InsertComment" /> <input type="button" id="AddComment" value="Add Comment" class="floatRight" />
        </form>
    </div>

Answer 1

On your ajax request, add :

dataType: "json"