using json_encode and json.parse() help.

[toxicandy]

I am trying to create a table in html/php that is dynamic sized but allows users to edit rows of the table, I have 99% of this done and the last piece is to send edited values VIA ajax to an edit page where I update to the database and the return json of updated information so that I can change row back to just text instead of input fields. The problem I am having is that my json_encode in php is sending back one of two outputs either:

[{status: "Out", description: "test"}]
0:{status: "Out", description: "test"}

Or

{status: "Out", description: "test"}
description:"test"
status:"Out"

Both are not working with my parsing and displaying of the information in my html tables. My Javascript is:

 $(document).on("click", ".btn-info-save", function(){
            var parent = $(this).closest("tr");
            var id = $(parent).attr("data-row");
            var name = $(parent).children("[data-column='name']");
            var status = $(parent).children("[data-column='status']");
            var desc = $(parent).children("[data-column='description']");
            var data = {data_name: id};
            $("[data-dc]").each( function(){
                var col = $(this).attr("data-dc");
                var val = $(this).val();
                data[col] = val;
            });
            $.ajax({
                url: "statusUpdate.php", // Change this to your PHP update script!
                type: 'POST',
                dataType: 'json',
                data: data,
                success: function(ret){
                obj = JSON.parse(ret);
                $(status).html(obj.status);
                $(desc).html(obj.description);
                 $(this).replaceWith("<button class='btn btn-info'>Edit</button>");
                   },
                error: function(ret){
                    console.log(ret.error);
                   }
             });
        });
    });

I tested a json.parsing script that looked like this:

<script>
var text = '{"status": "Out", "description": "test"}';

obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.status + " " + obj.description;
</script>

and it works but my problem, or what I believe my problem is seems to be that that status and description have quotes around them in the working example which I hard coded the json output but with the json encoding php script it doesn't have quotes. My php encoding is being done by the following:

$updateQuery = "UPDATE user_Status SET userStatus = :userStatus,userDesc = :userDesc,lastSeen = :lastSeen WHERE userName = :userName";
              $prepared = $dbh->prepare($updateQuery);
              $prepared->bindValue(':userStatus', $_POST['status']);
              $prepared->bindValue(':userDesc', $_POST['description']);
              $prepared->bindValue(':lastSeen', date("Y-m-d"));
              $prepared->bindValue(':userName', $_POST['data_name']);
              $prepared->execute();
              $grabQuery = "SELECT userStatus AS status, userDesc AS description FROM user_Status WHERE userName = :userName";
              $prepared = $dbh->prepare($grabQuery);
              $prepared->bindValue(':userName', $_POST['data_name']);
              $prepared->execute();
              $rows = array();
              $data = $prepared->fetch(PDO::FETCH_OBJ);
              $rows = $data;
              echo json_encode($rows); // echo json_encode([$rows]);

I commented the echo statement which changes between the two outputs I listed above. I tried to write my own json output and echoing it but I couldn't get it working with all the escaping required and I wasn't sure if that would even work because of how many double quotes you have to escape. Is there something I am missing as to why this isn't working? I didn't include that actual generation of table script or the jquery function that switches the text over to input fields because both of those are working but if it would help for me to include those I can.

EDIT: I am sorry for my stupid mistake but output is correct json it is actually coming out as {"status":"Out","description":"test"} which is correct but I was looking at preview instead of reponse in the inspect element area. My Mistake but the javascript is still giving me an error with the obj = JSON.parse(ret);

[hielo]

but the javascript is still giving me an error with the obj = JSON.parse(ret);

That's because on line 16, you supplied the dataType: 'json', option. By doing so, you are telling jquery that the data you are sending from the server is JSON. As a result, when the request completes, jquery automatically invokes its internal JSON.parse() equivalent for you, turning the JSON string into an object. So your ret parameter is an object. The error you are getting is because JSON.parse() expects a string, not an object. Simply rename ret to obj, and get rid of your JSON.parse() statement:

            $.ajax({
                url: "statusUpdate.php", // Change this to your PHP update script!
                type: 'POST',
                dataType: 'json',
                data: data,
                success: function(obj){

                        $(status).html(obj.status);
                        $(desc).html(obj.description);
                        $(this).replaceWith("<button class='btn btn-info'>Edit</button>");
                   },
                error: function(ret){
                    console.log(ret.error);
                }
             });