ajax returns [object object]

Question

i am making a quiz webapp with php and ajax where on click of radio button it triggers a function to get the new row in a database using ajax and php however it outputs object object inside the specified div element whenever the ajax success is called.

here is the ajax side of the code:

<script>  
 $(document).ready(function(){  
      $('input[type="radio"]').click(function(){  
           var answer = $(this).val();
           var question_id = $('#dataContainer').data('value');  
           $.ajax({  
                url:"quizengine.php",  
                method:"POST",  
                data:{
                    answer:answer,
                    question_id:question_id
                },
                dataType: 'json',  
                success:function(response){  
                    console.info(response);
                    $('#question').text(response);
                    $('#answer_one').text(response);
                    $('#answer_two').text(response);
                    $('#answer_three').text(response); 
                }  
           });

      });  
 });  

</script>

and here is the php side of the code

<?php
session_start();
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "rubiqube";
$connection = new mysqli($servername, $username, $password, $dbname);
if ($connection->connect_error) {
    die("Connection failed: " . $connection->connect_error);
}
?>
<?php 

if (isset($_POST['answer'])) {
    global $connection;
        $answer = $_POST['answer'];
        $question_id = $_POST['question_id'];
        $result = mysqli_query($connection, "SELECT is_right FROM answers WHERE question_id='$question_id'");
        $row = mysqli_fetch_assoc($result);
        if (isset($row)) {
            $correct = $row['is_right'];
            if ($answer === $correct) {
                $next = mysqli_query($connection, "SELECT Questions.question_id,Questions.lesson,Questions.instruction,Questions.question,Questions.image,Questions.option_type,Questions.question_value,Answers.answer_one,Answers.answer_two,Answers.answer_three,Answers.is_right FROM Questions LEFT JOIN Answers ON Questions.question_id = Answers.question_id WHERE Questions.question_id>'$question_id' ORDER BY Questions.question_id ASC LIMIT 1");

                $nextrow = mysqli_fetch_assoc($next);
                echo json_encode($nextrow);
                exit();
            }else{
                echo "error";
                exit();
            }
        }

    }




?>

here is an image of what i am talking about enter image description here

JSON == JavaScript OBJECT Notation. What exactly are you _expecting_ to get? If you want a specific element in the object, then you have to access that specific element. — Patrick Q, Apr 13 '20 at 21:24
i want when the ajax retrieve the row it output the value in text format to the divs with id of #question, #answer_one etc — Tevin Mcleod, Apr 13 '20 at 21:29
Well that's not just going to magically happen. You have to create the output exactly how you want it. There are plenty of questions/answers here about how to access JSON elements with JavaScript. Ones like https://stackoverflow.com/questions/10842841/accessing-json-elements-from-javascript or https://stackoverflow.com/questions/18910939/how-to-get-json-key-and-value-in-javascript or https://stackoverflow.com/questions/41297161/how-to-access-elements-of-json-array-using-javascript-jquery might be a good place to start — Patrick Q, Apr 13 '20 at 21:33

score 1 · Accepted Answer · answered Apr 13 '20 at 22:17

When the response comes back in the success callback, dataType: 'json' will convert it from json to an object (thus why you're seeing [object object]). You can't use the .text() method on it directly as that requires it to be a string. You may be able to do $('#question').text(response.key) depending on the data structure.

You need to simply either loop through the object and use the data, or access the properties directly (i.e. console.log(response.key)).

Here is some documentation from MDN on what to do with an object. Working with objects

Kinso · Answer 2 · 2020-04-13T22:12:46.317

0

Create an object of the Question on the server'side, then in your ajax response do this:

success:function(response){

                $('#question').text(response.propertyName);
                //propertyNamerefers to the one you made on the serverside
            }

edited Apr 13 '20 at 22:12

answered Apr 13 '20 at 21:46

Kinso

17
1
7

This isn't needed. He has `dataType: 'json'` which automatically parses it. – EternalHour Apr 13 '20 at 22:07

ajax returns [object object]

2 Answers2