Uncaught SyntaxError: Unexpected token '<', " "... is not valid JSON at JSON.parse ()

Question

I am trying to retrieve restaurant information data from AWS dynamodb and display it onto my website however I keep getting this error. I do not understand why I am getting the error. Any explanation or suggestions are appreciated. I am using java script and html with node server.js. At the moment I am able to store the restaurant name in URL params when I click a particular restaurant and go to the restaurant info page. From there I want to load the restaurant data.

Expected output: I want the values from the database to be retrieved from DB

js code

function getOneRestaurant() {
        var response = "";
        var request = new XMLHttpRequest();
        var urlParams = new URLSearchParams(window.location.search);
        var restaurant_name = urlParams.get("restaurant_name");
        console.log(restaurant_name)
      
    
        request.open("GET", "/https://aba3bd.execute-api.us-east-1.amazonaws.com/restaurants/" + restaurant_name, true);
        request.setRequestHeader("Content-Type", "application/json");
  
        request.onload = function () {
            info_array = JSON.parse(request.responseText);
            sessionStorage.setItem('restaurant__id', info_array[0].restaurant__id);
            sessionStorage.setItem('title', info_array[0].title);
            response = JSON.parse(request.responseText);
            console.log(response);
           
            
            var HTML = ""
            for (let i = 0; i < response.count; i++) {
                
                HTML += 
               
                '<img id="res_image" src="' + response.Items[i].image + '"' +
                'style="padding: 0 5% 0 5%; display: block; margin-left: auto; margin-right: auto; width: 88%; height: 500px; object-fit: cover;">' +
            '</div>'+
        
            '<div id="restaurant_details" class="container featured-box" style="padding-bottom: 15%;">' +
                '<h1 id="res_name" style="width: 500px;">' + response.Items[i].restaurant_name + '</h1>'+
                '<div style="padding-bottom: 50px; margin-bottom: -5rem;">' +
                    '<span id="res_badge" style="background-color: #debc99; color: white;"'+
                        'class="badge badge-secondary float-left">'+
                        '<div id="res_cuisine" style="font-size:medium;">' + response.Items[i].cuisine + '</div>'+
                    '</span>'+
                    '<div class="line"> </div>'+
                '</div>'+
        
                '<div class="line" style="margin-top: 20px;margin-bottom: -5rem;">'+
                    '<!-- Booking button -->'+
                    '<button type="button" id="btn_review" class="btn btn-primary"'+
                        'style="background-color: #8d4843; border: none;" data-toggle="modal" data-target="#bookingForm">'+
                        '<i class="fa fa-pencil-square-o" style="font-size: 20px;"></i>Make a booking</button>'+
        
                    '<!-- Favourite button -->'+
                    '<div style="padding-left: 20px; display: inline;">'+
                        '<button type="button" id="btn_favourite" class="btn btn-primary"'+
                            'style="background-color: #8d4843; border: none;" onclick="add_or_delete_favourites()">'+
                            '<i class="fa-bookmark fa-solid"></i> Add to Favourites </button>'+
                    '</div>'+
                '</div>'+
        
                '<!-- Map Section -->'+
                '<div class="card" style="width: 16rem; position: absolute; margin-left: 680px; margin-top: 29rem;">'+
                    '<iframe'+
                        'src="' + response.Items[i].map + '"'+
                        'width="400" height="350" style="border:0;" allowfullscreen="" loading="lazy"'+
                        'referrerpolicy="no-referrer-when-downgrade"></iframe>'+
                '</div>'+
                '<!-- About section -->'+
                '<div style="margin-top: 80px; width: 100rem;font-size: medium; font-weight:lighter;">'+
                    '<p id="description"'+
                        'style="width: 1100px; border-bottom: 1px solid black; border-style: solid; border-top: none; border-left: none; border-right: none; padding-bottom: 20px; ">'+
                        response.Items[i].description + '</p>' +
        
                '</div>'+
        
                '<!-- Restaurant Information -->'+
                '<div'+
                    'style="width: 600px; height: 400px; border-bottom: 1px solid black;  border-style: solid; border-top: none; border-left: none; border-right: none; margin-bottom: -100px; ">'+
        
                    '<h2 style="color: #ff914d; font-size: x-large;">Address</h2>'+
                    '<p style="font-size: medium;">'+
                    response.Items[i].address +
                    '</p>'+
                    '<h2 style="color: #ff914d; font-size: x-large;"> Contact Details</h2>'+
                    '<p style="font-size: medium;">+' + response.Items[i].contact_number + '</p>'+
                    '<h2 style="color: #ff914d; font-size: x-large;">Operating hours</h2>'+
                    '<p style="font-size: medium;">Mondays to Fridays 9am to 6pm</p>'+
        
                '</div>'+
                
        
            '</div>'
                
                

                
                     
                    
                 
    
    
        };
            document.getElementById('restaurantinfo').innerHTML = HTML
           
        };
    
        request.send();
    }

HTML code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Restaurant Information</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- Required scripts -->
    <!-- <script src="scripts/login_signup.js"></script>
    <script src="scripts/restaurant_filters.js"></script>
    <script src='scripts/restaurant_display.js'></script> -->

</head>
<style>
    ::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
  color: black;
  opacity: 1; /* Firefox */
}
</style>
<body onload="setNavBar(); getOneRestaurant();" >

<div id="restaurantinfo">
<div>
    <img  id="res_image" src="images/restaurant_image.jpg"
        style="padding: 0 5% 0 5%; display: block; margin-left: auto; margin-right: auto; width: 88%; height: 500px; object-fit: cover;">
    </div>

    <div id='restaurant_details' class='container featured-box' style="padding-bottom: 15%;">
        <h1 id='res_name' style="width: 500px;">Paradise Dynasty</h1>
        <div style="padding-bottom: 50px; margin-bottom: -5rem;">
            <span id='res_badge' style="background-color: #debc99; color: white;"
                class="badge badge-secondary float-left">
                <div id='res_cuisine' style="font-size:medium;"> cuisine </div>
            </span>
            <div class="line"> </div>
        </div>

        <div class="line" style="margin-top: 20px;margin-bottom: -5rem;">
            <!-- Booking button -->
            <button type="button" id="btn_review" class="btn btn-primary"
                style="background-color: #8d4843; border: none;" data-toggle="modal" data-target="#bookingForm">
                <i class="fa fa-pencil-square-o" style="font-size: 20px;"></i>Make a booking</button>

            <!-- Favourite button -->
            <div style="padding-left: 20px; display: inline;">
                <button type="button" id="btn_favourite" class="btn btn-primary"
                    style="background-color: #8d4843; border: none;" onclick="add_or_delete_favourites()">
                    <i class="fa-bookmark fa-solid"></i> Add to Favourites </button>
            </div>
        </div>

        <!-- Map Section -->
        <div class="card" style="width: 16rem; position: absolute; margin-left: 680px; margin-top: 29rem;">
            <iframe
                src="https://www.google.com/maps/embed?"
                width="400" height="350" style="border:0;" allowfullscreen="" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade"></iframe>
        </div>
        <!-- About section -->
        <div style="margin-top: 80px; width: 100rem;font-size: medium; font-weight:lighter;">
            <p id='description'
                style="width: 1100px; border-bottom: 1px solid black; border-style: solid; border-top: none; border-left: none; border-right: none; padding-bottom: 20px; ">
                Dining at Paradise Dynasty is akin to taking a step back to imperial China. Marvel at the opulence </p>

        </div>

        <!-- Restaurant Information -->
        <div
            style="width: 600px; height: 400px; border-bottom: 1px solid black;  border-style: solid; border-top: none; border-left: none; border-right: none; margin-bottom: -100px; ">

            <h2 style="color: #ff914d; font-size: x-large;">Address</h2>
            <p style="font-size: medium;">
                435 Orchard Rd, #01-18 Wisma Atria, Singapore 238877435 Orchard Rd, #01-18 Wisma Atria, Singapore 238877
            </p>
            <h2 style="color: #ff914d; font-size: x-large;"> Contact Details</h2>
            <p style="font-size: medium;">+65 6487 6489</p>
            <h2 style="color: #ff914d; font-size: x-large;">Operating hours</h2>
            <p style="font-size: medium;">Mondays to Fridays 9am to 6pm</p>

        </div>
        

    </div>
</div>
    <!-- About -->
    <div style="font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;"
        class="container-fluid about">
        <div class="row">
            <div class="col-md-2 offset-md-2">
                <h1>HEARTY EATS<h1>
            </div>
            <div class="col-md-6 justifytext" style="font-size:medium;">Hearty Eats is a restaurant reservation website
                created to provide
                customers with a fuss free dining experience. Book a restaurant anytime, anywhere. Choose a restaurant,
                select a date and time, and you're good to go!</div>
        </div>
    </div>
    

</body>

</html>

As you can see in the image below, The url can store restaurant_name but data from Database cannot be retrieved and displayed

Your GET request is returning HTML, not JSON. The HTML is probably an error message. Use your browser debugging "Network" tab to look at the actual returned content. — Pointy, Jan 18 '23 at 14:50
Besides, because you are removing some newlines in your string with HTML contents, some elements get malformed (e.g. `iframesrc` and `divstyle`). — MC Emperor, Jan 18 '23 at 14:56
Does this answer your question? ["SyntaxError: Unexpected token < in JSON at position 0"](https://stackoverflow.com/questions/37280274/syntaxerror-unexpected-token-in-json-at-position-0) — Daniel Beck, Jan 20 '23 at 15:45

score 0 · Answer 1 · answered Jan 18 '23 at 14:56

At a glance this appears to be happening because your request is returning HTML and not returning JSON. It is likely this line info_array = JSON.parse(request.responseText); that is throwing the error, because it is attempting to parse HTML as JSON.

And looking at the image that you shared this makes sense, since it appears that you are getting a 204 ERR_BLOCKED_BY_CLIENT error response from maps.googleapis.com. If that response is formatted as an HTML error page, then that would be the reason for your issue.

Adding to this, I'd recommend that you check the response status code or content-type headers before you parse the response body. — Chris Anderson, Jan 18 '23 at 15:22

Uncaught SyntaxError: Unexpected token '<', " "... is not valid JSON at JSON.parse ()

1 Answers1