[英]How do I solve, “Uncaught SyntaxError: Unexpected token l in JSON at position 0 …?”
I am testing pulling in API weather data (open weather map.org) with JavaScript and XMLHttpRequest. 我正在测试使用JavaScript和XMLHttpRequest提取API天气数据(open weather map.org)。 I am using Github pages as my test site.
我正在使用Github页面作为测试站点。 I need JSON.parse to turn the info.
我需要JSON.parse来打开信息。 into a JS object, but JSON.parse is always an issue.
放入JS对象,但JSON.parse始终是一个问题。 I have been struggling with this error message:
我一直在努力与此错误消息:
Uncaught SyntaxError: Unexpected token l in JSON at position 0
at JSON.parse (<anonymous>)
at data.weather.forEach.weather (scripts.js:29)
at Array.forEach (<anonymous>)
at XMLHttpRequest.request.onload (scripts.js:22)
I read on several support threads that it was a server side error and to look in the network tab -- I did and everything has a 200 status!? 我在几个支持线程上看到这是服务器端错误,然后在“网络”选项卡中查找-我确实做了,并且所有状态都为200! I also read on multiple threads that it meant that JSON was not being returned.
我还在多个线程上读到,这意味着未返回JSON。 But either there is no mention of how to remedy this or I have no clue what they are talking about.
但是,要么没有提及如何解决这个问题,要么我不知道他们在说什么。 I am new to this and have been stuck with error messages for weeks.
我对此并不陌生,并在数周内一直被错误消息所困扰。 I am the only developer at my startup and need to solve this soon.
我是启动时唯一的开发人员,需要尽快解决。 Any guidance would be greatly appreciated.
任何指导将不胜感激。
scripts.js: scripts.js中:
// Whole-script strict mode syntax
'use strict';
const app = document.getElementById("root");
const logo = document.createElement("img");
logo.src = "logo.png";
const container = document.createElement("div");
container.setAttribute("class", "container");
app.appendChild(logo);
app.appendChild(container);
var request = new XMLHttpRequest();
request.open("GET", "https://api.openweathermap.org/data/2.5/weather?
q = London & APPID = 3190 b3e074868b6189a94a8795afa8a2 ", true);
request.onload = function() {
// Begin accessing JSON data here
'use strict';
var data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
data.weather.forEach(weather => {
const card = document.createElement("div");
card.setAttribute("class", "card");
const h1 = document.createElement("h1");
h1.textContent = weather.title;
const p = document.createElement("p");
weather.description = JSON.parse(weather.description).substring(0, 300);
p.textContent = `${weather.description}...`;
container.appendChild(card);
card.appendChild(h1);
card.appendChild(p);
});
} else {
const errorMessage = document.createElement("marquee");
errorMessage.textContent = `Hug it, it's not working!`;
app.appendChild(errorMessage);
}
}
request.send();
index.html: index.html的:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>You are Techy Job Listings</title>
<link href="https://fonts.googleapis.com/css?family=Dosis:400,700"
rel="stylesheet">
<link href="style.css" rel="stylesheet">
</head>
<body>
style.css: style.css中:
* {
box-sizing: border-box
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-family: 'Dosis', sans-serif;
line-height: 1.6;
color: #666;
background: #F6F6F6;
}
#root {
max-width: 1200px;
margin: 0 auto;
}
h1 {
text-align: center;
padding: 1.5rem 2.5rem;
background-image: linear-gradient(120deg, #fbc2eb 0%, #a6c1ee 100%);
margin: 0 0 2rem 0;
font-size: 1.5rem;
color: white;
}
p {
padding: 0 2.5rem 2.5rem;
margin: 0;
}
.container {
display: flex;
flex-wrap: wrap;
}
.card {
margin: 1rem;
background: white;
box-shadow: 2px 4px 25px rgba(0, 0, 0, .1);
border-radius: 12px;
overflow: hidden;
transition: all .2s linear;
}
.card:hover {
box-shadow: 2px 8px 45px rgba(0, 0, 0, .15);
transform: translate3D(0, -2px, 0);
}
@media screen and (min-width: 600px) {
.card {
flex: 1 1 calc(50% - 2rem);
}
}
@media screen and (min-width: 900px) {
.card {
flex: 1 1 calc(33% - 2rem);
}
}
.card:nth-child(2n) h1 {
background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
.card:nth-child(4n) h1 {
background-image: linear-gradient(120deg, #ff9a9e 0%, #fecfef 100%);
}
.card:nth-child(5n) h1 {
background-image: linear-gradient(120deg, #ffc3a0 0%, #ffafbd 100%);
}
weather.description
is just an ordinary string, it's not JSON. weather.description
只是一个普通的字符串,不是JSON。 So just take the substring of that. 因此,只需取其子字符串即可。
weather.description = weather.description.substring(0, 300);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.