Uncaught SyntaxError: 意外的標記 '<', " "... JSON at JSON.parse (<anonymous> )</anonymous>
[英]Uncaught SyntaxError: Unexpected token '<', "<html> "... is not valid JSON at JSON.parse (<anonymous>)
問題描述
我正在嘗試從 AWS dynamodb 檢索餐廳信息數據並將其顯示到我的網站上，但我一直收到此錯誤。 我不明白為什么會收到錯誤消息。 任何解釋或建議表示贊賞。 我將 java 腳本和 html 與節點 server.js 一起使用。 目前，當我單擊特定餐廳時，我可以將餐廳名稱存儲在 URL 參數中，並將 go 存儲到餐廳信息頁面。 我想從那里加載餐廳數據。
預期 output：我希望從數據庫中檢索數據庫中的值
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://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代碼
<!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 但無法檢索和顯示數據庫中的數據
1 個解決方案
解決方案1
0 2023-01-18 14:56:09
乍一看，這似乎正在發生，因為您的請求正在返回 HTML 而不是返回 JSON。這行很可能是info_array = JSON.parse(request.responseText); 這是拋出錯誤，因為它試圖將 HTML 解析為 JSON。
查看您分享的圖片是有道理的，因為您似乎從 maps.googleapis.com 收到了204 ERR_BLOCKED_BY_CLIENT錯誤響應。 如果該響應的格式為 HTML 錯誤頁面，那么這就是您遇到問題的原因。
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 當試圖從 api 路由中的 s3 中提取數據時
[英]Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 when trying to pull data from s3 in an api route
未捕獲的語法錯誤：Gcloud 中 app.js 中的意外標記“<”
[英]Uncaught SyntaxError: Unexpected token '<' in app.js in Gcloud
部署 Firebase 和 Node.js 應用程序導致錯誤：Error: Parse Error in remoteconfig.template.json: Unexpected token 'i' at 1:1
[英]Deploying Firebase and Node.js application results in error: Error: Parse Error in remoteconfig.template.json: Unexpected token 'i' at 1:1
“JSON 中的意外令牌}”（通過 Zapier 連接的 Firestore）
[英]"Unexpected token } in JSON" (Firestore connecting through Zapier)
如何解決 Firebase 中的“Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)”？
[英]How to solve 'Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)' in Firebase?
AWS Amplify：DevTools 無法加載 SourceMap：JSON 中的意外令牌 < position 0
[英]AWS Amplify: DevTools failed to load SourceMap: Unexpected token < in JSON at position 0
aws api 網關返回無法將負載解析為 json 無法識別的令牌
[英]aws api gateway return Could not parse payload into json Unrecognized token
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
相關問題
Angular - 語法錯誤：意外的標記“<”，“<div id="text_translate"><p> 這是部署在 AWS Amplify 上的 Angular 應用程序</p><p>該應用程序已成功部署，但呈現白屏，並且在控制台上我收到此消息：</p><p> <a href="https://i.stack.imgur.com/dYSXk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dYSXk.png" alt="在此處輸入圖像描述"></a></p><p> 但我不知道如何解決。</p><hr><p> 這是服務提供者：</p><pre> import { Inject, Injectable } from '@angular/core'; import { CONFIG_TOKEN, UserService, EuiAppConfig, UserDetails, UserPreferences, I18nService, } from '@eui/core'; import { HttpClient } from '@angular/common/http'; import { Observable, of, zip } from 'rxjs'; import { switchMap } from 'rxjs/operators'; @Injectable({ providedIn: 'root', }) export class AppStarterService { defaultUserPreferences: UserPreferences; constructor( protected userService: UserService, protected i18nService: I18nService, @Inject(CONFIG_TOKEN) private config: EuiAppConfig, protected http: HttpClient, ) { } start(): Observable<any> { return zip( this.initUserService().pipe( switchMap((userStatus) => { console.log(userStatus); return this.i18nService.init(); }), ), ); } /** * Fetches user details, * create user: UserState object * then initialise to the UserService on run time */ initUserService(): Observable<any> { return zip( this.fetchUserDetails(), ).pipe( switchMap(([userDetails]) => this.userService.init(userDetails))); } /** * Fetches user details */ private fetchUserDetails(): Observable<UserDetails> { const moduleCoreApi = this.config.modules.core; const url = `${moduleCoreApi.base}${moduleCoreApi.userDetails}`; const user = { userId: 'anonymous' }; if (;url) { return of(user). } return this.http;get<UserDetails>(url); } }</pre><p> 從該代碼來看，這是“ <strong>const moduleCoreApi = this.config.modules.core;</strong> ”和“ <strong>moduleCoreApi.base</strong> ”部分</p><pre>import { ModulesConfig } from '@eui/core'; export const MODULES: ModulesConfig = { core: { base: '/api', } };</pre><p> 這是<strong>environment.prod.ts</strong></p><pre> import { EuiEnvConfig } from '@eui/core'; export const environment: EuiEnvConfig = { production: true, enableDevToolRedux: false, envDynamicConfig: { uri: '/assets/env-json-config.json', deepMerge: true, merge: ['modules'], }, };</pre><p> 從該代碼中，這是<strong>env-json-config.json</strong></p><pre> { "modules": { "core": { "userDetails": "/user-details" } } }</pre></div>
Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 當試圖從 api 路由中的 s3 中提取數據時
未捕獲的語法錯誤：Gcloud 中 app.js 中的意外標記“<”
部署 Firebase 和 Node.js 應用程序導致錯誤：Error: Parse Error in remoteconfig.template.json: Unexpected token 'i' at 1:1
“JSON 中的意外令牌}”（通過 Zapier 連接的 Firestore）
NextJS Jest SyntaxError：意外的令牌“導出”
如何解決 Firebase 中的“Uncaught SyntaxError: Unexpected reserved word (at index.html:93:36)”？
無法將請求正文解析為 json：無法識別的令牌
AWS Amplify：DevTools 無法加載 SourceMap：JSON 中的意外令牌 < position 0
aws api 網關返回無法將負載解析為 json 無法識別的令牌
相關標簽