SyntaxError:JSON.parse:JSON数据的第1行第1列出现意外字符吗? [英] SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data?
问题描述
有人可以告诉我为什么从硬盘驱动器访问数据时，此代码为什么能在HTML页面中完美地工作，但是当我将其添加到express和node中时，我会得到
Can anyone tell me why this code will work perfectly in an HTML page when accessing the data from my hard drive but when I add it to express and node I get a
SyntaxError:JSON.parse:JSON数据第1行第1列的意外字符
具有完全格式化的代码.我知道我使用格式化程序对其进行了测试，甚至手动创建了一个json对象.这是代码:
with perfectly formatted code. I know I tested it with a formatter and I even manually created a json object. Here is the code:
<html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled</title>
</head>
<body>
<div id="output"></div>
<button id="getProperty">Get Property</button>
<script>
document.getElementById('getProperty').addEventListener('click', getProperty);
function getProperty() {
fetch('2016-regular.json')
.then((res) => res.json())
.then((data) => {
let output = '<h2>Property</h2>';
console.log(data);
data.propertystandings.propertystandingsentry.forEach(function(propertyEntry){
output += `
<ul>
<li>id: ${propertyEntry.property.ID}</li>
<li>city: ${propertyEntry.property.City}</li>
<li>prop name: ${propertyEntry.property.Name}</li>
<li>prop name: ${propertyEntry.rank}</li>
</ul>
`;
});
document.getElementById('output').innerHTML = output;
})
}
</script>
</body>
</html>
</html>
</html>
But then this code in express causes the error- same exact file that worked perfectly before ran thru express now causes this error:
**"index.ejs"**
<div id="output"></div>
<button id="getProperty">Get Property</button>
<script>
document.getElementById('getProperty').addEventListener('click', getProperty);
function getProperty() {
/*fetch('sample.txt')
.then(function(res) {
return res.text();
})
.then(function(data){
console.log(data);
});*/
fetch("2016-regular.json")
.then((res) => res.json())
.then((data) => {
console.log(data);//**won't even read the data without that error**
});
}
</script>
**express code**
var express = require('express');
//var bodyParser = require('body-parser');
var cors = require('cors');
var path = require('path');
var app = express();
app.use(bodyParser());
app.use(cors());
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.get('/', function (request, response) {
response.render('index.ejs');
});
app.listen(8000, function() {
console.log('running on 8000');
});
在访问文件夹或手动创建文件并将其保存在硬盘上时，为什么在纯html中可以正常工作的任何想法，但是一旦我将其放入Express或尝试访问API，数据就来自(最终目标)我收到错误 SyntaxError:JSON.parse:JSON数据第1行第1列的意外字符
any ideas why this works fine in plain html when accessing a folder or if I manually create and save the file on my hard drive but once I put it in express or try to access the API the data came from (the final goal) I get the error SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
推荐答案
我认为最重要的是，您需要确保JSON文件可访问/可加载，然后确保它是有效的.这是一个最小的工作示例.您的app.js应该很简单:
I think the bottom line is that you need to make sure your JSON file is reachable/loadable, and then make sure it is valid. Here is a minimal working example. You app.js should be simply:
var express = require('express');
var index = require('./routes/index');
var app = express();
app.set('views', 'views');
app.set('view engine', 'ejs');
app.use(express.static('public'));
app.use('/', index);
module.exports = app;
您的route/index.js很简单:
Your routes/index.js is simply:
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
module.exports = router;
您的views/index.ejs应该是:
And your views/index.ejs should be:
<html>
<body>
<div id="output">JSON contents will appear here.</div>
<button id="getProperty">Click to load JSON</button>
<script>
document.getElementById('getProperty').addEventListener('click', getProperty);
function getProperty() {
fetch("./2016-regular.json")
.then((res) => res.json())
.then((data) => {
document.getElementById('output').innerHTML = JSON.stringify(data);
});
}
</script>
</body>
</html>
最后，确保您的JSON文件保存在./public/2016-regular.json.这是我的:
Finally, make sure your JSON file is saved at ./public/2016-regular.json. Here is mine:
{ "item1":"value1"， "item2":"value2"， "item3":"value3" }
{ "item1": "value1", "item2": "value2", "item3": "value3" }
测试1 ，请确保将我的浏览器指向 http ://localhost:3000/2016-regular.json (请注意，如果您在其他端口上运行，则可能必须更改端口).
TEST 1 Make sure your JSON file is reachable my pointing your browser to http://localhost:3000/2016-regular.json (note you may have to change the port if you are running on a different port).
测试2 导航到 http://localhost:3000/并点击按钮.文件内容应显示在结果div中.
TEST 2 Navigate to http://localhost:3000/ and click on the button. The file contents should appear in the results div.
完整的工作代码可此处可用.只需克隆存储库，然后
Full working code is available here. Just clone the repository, then
cd exp1
npm install
npm start
这篇关于SyntaxError:JSON.parse:JSON数据的第1行第1列出现意外字符吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
