SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符?-前端问题

SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data?(SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符?)

本文介绍了SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

谁能告诉我为什么当我从我的硬盘访问数据时这段代码可以在 HTML 页面中完美运行，但是当我将它添加到 express 和节点时我得到一个

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: unexpected character at line 1 column 1 of the JSON data

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;

你的 routes/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:

{项目1":价值1"，项目2":价值2"，项目 3":价值 3"}

{ "item1": "value1", "item2": "value2", "item3": "value3" }

测试 1 确保您的 JSON 文件可访问，我将您的浏览器指向 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