Getting json array in Ajax

Question

I'm trying to display some data from the ajax response as below.

$.post(
            '/tests/elementary/'+($(this).attr('data-test-id'))+'/get-details', // location of your php script
            {
            }, // any data you want to send to the script
            function( data ) {  // a function to deal with the returned information
                if(data.taken =='false'){
                    alert('ok')
                }
                else {

                    $('#test_name').empty().append(data.information);
                    $('#test_point').empty().append(data.details['score']);
                    $('#test_date').empty().append(data.updated_at);


                    for(var i=0;i<data.testlog.length;i++) {
                        var temp = data.testlog[i];
                        $("#test_details_body").append("<tr> <td>"+ (i+1) +"</td> <td>"+temp['operand1']+' '+temp['operator']+' '+temp['operand2']+"</td><td>"+temp['user_answer']+"<td>"+temp['correct'] +"</td><tr>")
                    }



                }
            });
        });

But I'm getting Uncaught SyntaxError: Unexpected token o error.

response:

{
    "success":"true",
    "taken":"true",
    "details":"{\"id\":2,\"user_id\":1,\"test_id\":9,\"token\":\"682c5de08481081b940364416cdce99d\",\"score\":80,\"attempts\":2,\"created_at\":\"2015-02-16 02:09:12\",\"updated_at\":\"2015-02-16 02:09:12\",\"course_id\":7}",
    "information":"sample test exam",
    "updated_at":"16-Feb-2015 02:02:12",
    "testlog":[
        {"id":21,"test_id":9,"user_id":1,"operand1":1,"operand2":10,"operator":"+","answer":11,"user_answer":11,"answering_time":"00:00:00","created_at":"2015-02-16 02:53:11","updated_at":"2015-02-16 02:53:11","token":"682c5de08481081b940364416cdce99d","correct":"1"},
        {"id":22,"test_id":9,"user_id":1,"operand1":2,"operand2":10,"operator":"+","answer":12,"user_answer":12,"answering_time":"00:00:00","created_at":"2015-02-16 02:53:15","updated_at":"2015-02-16 02:53:15","token":"682c5de08481081b940364416cdce99d","correct":"1"},
        {"id":23,"test_id":9,"user_id":1,"operand1":3,"operand2":10,"operator":"+","answer":13,"user_answer":0,"answering_time":"00:00:00","created_at":"2015-02-16 02:53:18","updated_at":"2015-02-16 02:53:18","token":"682c5de08481081b940364416cdce99d","correct":"1"},
        {"id":24,"test_id":9,"user_id":1,"operand1":4,"operand2":10,"operator":"+","answer":14,"user_answer":0,"answering_time":"00:00:00","created_at":"2015-02-16 02:53:25","updated_at":"2015-02-16 02:53:25","token":"682c5de08481081b940364416cdce99d","correct":"0"},
        {"id":25,"test_id":9,"user_id":1,"operand1":5,"operand2":10,"operator":"+","answer":15,"user_answer":0,"answering_time":"00:00:00","created_at":"2015-02-16 02:53:29","updated_at":"2015-02-16 02:53:29","token":"682c5de08481081b940364416cdce99d","correct":"1"}
    ]
}

php script for fetching data

public function getTestDetails($id){

        $exists = Testresult::where('user_id', Auth::id())->where('test_id', $id)->first();

        if($exists==null){
            return Response::json(["success"=>"true", "taken"=>"false"]);
        }
        else{

            $updated_at = date("d-M-Y H:m:s", strtotime($exists->updated_at));
            $testLog = Testlog::where('token', $exists->token)->get();

            $info = Test::where('id', $id)->pluck('name');
            return Response::json(["success"=>"true", "taken"=>"true",
                                    "details"=>"$exists",
                                    "information"=>$info,
                                    "updated_at"=>$updated_at,
                                    "testlog"=>$testLog]);
        }


    }

Am I doing it right?

Answer 1

It doesn't look like data.testlog needs to be parsed you could do this

var testlog = data.testlog
for(var i = 0; i < testlog.length; i++){
    var temp = testlog[i]
    $('#test_details_body').append('<tr><td>' + (i+1) + '</td><td>' + temp.operand1 + ' ' + temp.operator + ' ' + temp.operand2 + '</td><td>' + temp.user_answer + '<td>' + temp.correct + '</td><tr>')
}

Also I changed a couple things in your code (spacing, using single rather than double quotes, and using dot notation for call values from an object.)

Answer 2

You are on the correct track! I think there are two issues here. The first is that you are trying to parse a JavaScript Object into a JavaScript Object. This is visible based on the fact that your screenshot shows the response parsing most of your object correctly via your AJAX call. This is confirmed by the error you are seeing in the console log.

So removing that JSON.parse(...) as below will fix that issue:

for(var i=0;i<data.testlog.length;i++) {
   var temp = data.testlog[i];
   $("#test_details_body").append("<tr> <td>"+ (i+1) +"</td> <td>"+temp['operand1']+' '+temp['operator']+' '+temp['operand2']+"</td><td>"+temp['user_answer']+"<td>"+temp['correct'] +"</td><tr>")
}

The second issue is the generation of your JSON string, which as you discuss in the comments is coming via PHP. This isn't necessary for answering the original question, but for better practice should be corrected. I also think you may have thought you had to parse your array, because you have JSON strings embedded in your JavaScript Object.

I'm a little rusty on PHP but I think this line "details"=>"$exists", should actually be "details"=>$exists