javascript - Uncaught SyntaxError: Unexpected token < in JSON at position 0 : at JSON.parse (<anonymous>) at Object.<anonymous>

Question

i have an error in JSON.parse(), i have .php file which contain method to retrieve data from database and .js file for autoComplete function, my .php file return data as string and i need to convert it to object by using JSON.parse().

this is my php file

<?php 
include_once("database_conn.php");

function request($conn)
{
    $eventstArray = array();

    $events = "SELECT * 
                FROM te_events,te_category,te_venue
                WHERE te_events.venueID = te_venue.venueID 
                    AND te_events.catID = te_category_catID
                ORDER BY 1
                ";

    $eventsQuery1 = mysqli_query($conn,$events) or DIE (mysqli_error($conn));

    while($eventsQuery2 = mysqli_fetch_array($eventsQuery1))
    {
        $eventstArray[] = array
        (
            'label'         => $eventsQuery2['eventTitle'];
            'venue'         => $eventsQuery2['venueName'];
            'category'      => $eventsQuery2['catDesc'];
            'price'         => $eventsQuery2['eventPrice'];
            'description'   => $eventsQuery2['eventDescription'];
        );
    }

    return json_encode($eventstArray);
}
echo request($conn);
?>

and this is my autoComplete.js file

$(document).ready(function()
            {
                'use strict';
                $.ajax
                ({
                    method: "get",
                    url: "requestOffer.php"
                })
                .done(function(data)
                {
                    var offers = JSON.parse(data);

                    // now we have the data attach the autocomplete
                    $('#EOffers').autocomplete
                    ({
                        minLength:3,
                        source: offers,
                        select: function(event, ui) 
                        {
                            $('#chosenEvent').text(ui.item.label);
                            $('#chosenEvent').text(ui.item.vanue);
                        }
                    });
                });
            });

i can't remove the JSON.parse() because i need that to convert from string to object, hope someone can help me to solve this and i really appreciate that.

Answer 1

The error is within your server side, when there's an error on your server side, the response comes with html tags '<' when there's an error php will add tag with the error message. Therefore your json contains the html tags and becomes invalid because of unexpected tags.

The error is within this array

$eventstArray[] = array
        (
            'label'         => $eventsQuery2['eventTitle'];
            'venue'         => $eventsQuery2['venueName'];
            'category'      => $eventsQuery2['catDesc'];
            'price'         => $eventsQuery2['eventPrice'];
            'description'   => $eventsQuery2['eventDescription'];
        );

it should be

$eventstArray[] = array(
            'label' => $eventsQuery2['eventTitle'],
            'venue' => $eventsQuery2['venueName'],
            'category' => $eventsQuery2['catDesc'],
            'price' => $eventsQuery2['eventPrice'],
            'description' => $eventsQuery2['eventDescription']
        );

(The problem source was the semi-colon(;) after the description value. It should be only at the end of array)