SyntaxError:JSON.parse:JSON 数据的第 1 行第 1 列出现意外字符?

2022-01-20 00:00:00 json express fetch javascript

谁能告诉我为什么当我从我的硬盘访问数据时这段代码可以在 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

cd exp1
npm install
npm start

相关文章