javascript 未捕获的语法错误： 意外标记"〈"、"..."不是JSON处的有效JSON,parse()< html> "... is not valid JSON at JSON.parse (< anonymous>)

xu3bshqb  于 2023-01-19  发布在  Java
关注(0)|答案(1)|浏览(588)

我试图从AWS dynamodb检索餐厅信息数据，并显示到我的网站上，但我一直得到这个错误。我不明白为什么我得到的错误。任何解释或建议，不胜感激。我使用的是java脚本和html与节点server.js。目前，我能够存储在URL参数中的餐厅名称时，我点击一个特定的餐厅，并前往餐厅信息页面。从那里我想加载餐厅数据。
预期产出：我希望从DB中检索数据库中的值
js代码

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://aba3bnzddd.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代码

<!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>

正如您在下面的图像中所看到的，URL可以存储restaurant_name，但无法检索和显示数据库中的数据enter image description here

JavaScript

1条答案

按热度按时间
eni9jsuy

eni9jsuy1#

乍一看，这似乎是因为您的请求返回HTML而不是JSON，很可能是info_array = JSON.parse(request.responseText);这一行抛出了错误，因为它试图将HTML解析为JSON。
查看您共享的图像是有意义的，因为您似乎从maps.googleapis.com收到了204 ERR_BLOCKED_BY_CLIENT错误响应。如果该响应被格式化为HTML错误页面，那么这将是您的问题的原因。

赞(0）分享  回复(0）举报  2023-01-19
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com