如何使用基于 JSON 的 jQuery 读取 JSON 文件并生成动态页面答案

【问题标题】：How can I read JSON file and generate dynamic page using jQuery based on JSON如何使用基于 JSON 的 jQuery 读取 JSON 文件并生成动态页面
【发布时间】：2020-08-06 13:15:33
【问题描述】：

我是这个节点和 json 的新手，我在从 JSON 中获取数据时遇到了一些问题。这是我的代码

'use strict';

const fs = require('fs');

let questsRawData = fs.readFileSync('quests-db.json');
let quests = JSON.parse(questsRawData);

for (var i = 0; i < quests.length; i++) {
  console.log(quests[i].title);
}

当我在节点中运行它时，我在终端中得到了预期的结果，但在浏览器中我在控制台中得到了这个消息

Uncaught SyntaxError: Unexpected end of JSON input
    at JSON.parse (<anonymous>)
    at showNeg.js:241
    at XMLHttpRequest.onDefaultReadyStateChangeHandler (showNeg.js:311)

如果我尝试像这样使用 jQuery 将结果附加到 DOM 中

for (var i = 0; i < quests.length; i++) {
  $(body).append('<p>' + quests[i].title + '</p>);
}

我在终端收到此错误

C:\Users\Denis\Desktop\Test\main.js:9
  $(body).append('<p>' + quests[i].title + '</p>');
  ^

ReferenceError: $ is not defined

我正在尝试使用电子制作桌面应用程序，并且我正在考虑使用 JSON 作为本地数据库。

谢谢

【问题讨论】：

$ is not defined 是因为您没有在项目中包含 jquery。对于另一个错误，看看这是否是一个有效的 json。使用一些在线 json 验证器检查它
我在 html 页面的 main.js 之前包含了 jquery
main.js 通常不通过 html 页面链接（又名renderer 进程）

标签： javascript html node.js json electron

【解决方案1】：

请将您的 jquery 安装为依赖项

npm install --save jquery

然后在你的 index.html 添加这个脚本。

  <head>
    <script>
      window.$ = window.jQuery = require("jquery");
    </script>
    ....

createBrowerWindow 和 nodeIntegration 在您的 main.js 中为 true。

const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

读取 json 文件就足够了。

let quests = require('./quests-db.json');

还有一件事。 Json 对象不能是可迭代的。对于你的情况。你需要这样使用。

for (const key in quests) {
  console.log(quests[key]);
}
...
$(body).append('<p>' + quests[key].title + '</p>);

【讨论】：