how to fix “Uncaught SyntaxError: Unexpected token _ in JSON at position . . . ”

i am trying to output a json_encode on a php code. and then I suddenly caught this error on the network tab in google chrome. this is my first time handling errors in ajax and json.

Uncaught SyntaxError: Unexpected token _ in JSON at position 1
    at JSON.parse (<anonymous>)
    at String.<anonymous> (script.js:61)
    at Function.each (jquery.min.js:2)
    at Object.<anonymous> (script.js:60)
    at u (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at k (jquery.min.js:2)
    at XMLHttpRequest.<anonymous> (jquery.min.js:2)
(anonymous) @ script.js:61
each @ jquery.min.js:2
(anonymous) @ script.js:60
u @ jquery.min.js:2
fireWith @ jquery.min.js:2
k @ jquery.min.js:2
(anonymous) @ jquery.min.js:2
load (async)
send @ jquery.min.js:2
ajax @ jquery.min.js:2
(anonymous) @ script.js:52
dispatch @ jquery.min.js:2
y.handle @ jquery.min.js:2

clicking the script.js:61 points me at the part of code (pointed by my comment in the jquery code)

$("[id^='deleteNotes']").click(function() {
        var id = $(this).closest('div').attr('id');
        console.log(id);
        $.ajax({
            url: "ajax/deleteidentifier.php",
            type: "post",
            data: {
                id_delete: id
            }
        })
        .done(function(result_query_sql_deletedStatus_notes){
            $.each(JSON.parse(result_query_sql_deletedStatus_notes), function(key, value) {
                if (JSON.parse(value).deleted_status == "n") { //the cursor points me here. precisely, at the end of JSON and start of .parse
                    alert("Moved to deleted folder.");
                    window.location.reload();
                }
                else {
                    alert("Note permanently deleted!");
                    window.location.reload();
                }
            });
        });
    });

i want to use the value of deleted_status on the json_encode value as a trigger of the json alert. here’s the json encode.

{
"note_record":"1_5cdb7ad317291.jpeg",
"note_type":"images",
"note_title":"",
"user_id":"9",
"date_created":"Wednesday, May 15, 2019. | 10:34:59 AM",
"date_updated":"",
"note_id":"1",
"archived_status":"n",
"deleted_status":"y",
"date_deleted":"Sunday, May 19, 2019. | 07:59:32 PM",
"image_directory":"image_uploads/1_5cdb7ad317291.jpeg"
}

I honestly cannot point out the error here because there’s no understandable error message for me to look at in my level of knowledge.

EDIT: Here’s the deleteidentifier.php which is called in ajax

<?php
    include_once("../db.php");
    include "../session.php";
    if (isset($_POST["id_delete"])) {
        $sql_deletedStatus_notes = "SELECT * FROM notes WHERE note_id = '". $_POST['id_delete'] ."'";
        $query_sql_deletedStatus_notes = $conn->query($sql_deletedStatus_notes);
        $result_query_sql_deletedStatus_notes = $query_sql_deletedStatus_notes->fetch_assoc();

        if ($result_query_sql_deletedStatus_notes["deleted_status"] == "y") {
            if ($result_query_sql_deletedStatus_notes["note_type"] == "notes") {
                $sql_delete_notes = "DELETE FROM notes WHERE note_id = '" . $_POST['id_delete'] . "'";
                $query_sql_delete_notes = $conn->query($sql_delete_notes);
            }
            else {
                $sql_delete_images = "DELETE FROM notes WHERE image_directory LIKE 'image_uploads/" . $_POST['id_delete'] . "' !_% ESCAPE '!'";
                $query_sql_delete_images = $conn->query($sql_delete_images);
            }
        }
        else {
            $sql_update_deletedStatus_notes = "UPDATE notes SET deleted_status='y', date_deleted = '" . $date_time_curr . "' WHERE note_id = '". $_POST['id_delete'] ."' OR image_directory LIKE 'image_uploads/" . $_POST['id_delete'] . "!_%' ESCAPE '!'";
            $query_sql_update_deletedStatus_notes = $conn->query($sql_update_deletedStatus_notes);
        }
    }
    $conn->close();
    echo json_encode($result_query_sql_deletedStatus_notes);
?>

Answer

You parse the received JSON twice. With your $.each call you then iterate over the object and try to parse the value of each object key. In the first iteration, with your example data, you try to parse “1_5cdb7ad317291.jpeg” as JSON, which is no valid JSON. Thus, you can access the value after the first parse.

$("[id^='deleteNotes']").click(function() {
        var id = $(this).closest('div').attr('id');
        console.log(id);
        $.ajax({
            url: "ajax/deleteidentifier.php",
            type: "post",
            data: {
                id_delete: id
            }
        })
        .done(function(result_query_sql_deletedStatus_notes){
            var data = JSON.parse(result_query_sql_deletedStatus_notes);
            if (data.deleted_status == "n") { //the cursor points me here. precisely, at the end of JSON and start of .parse
                alert("Moved to deleted folder.");
                window.location.reload();
            } else {
                alert("Note permanently deleted!");
                window.location.reload();
            }
        });
    });