Как я могу прочитать JSON файл и сгенерировать динамическую c страницу, используя jQuery на основе JSON - PullRequest
0 голосов
/ 23 апреля 2020

Я новичок в этом узле и 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 в качестве локальной базы данных.

Спасибо

1 Ответ

0 голосов
/ 23 апреля 2020

Пожалуйста, установите jquery как зависимость

npm install --save jquery

А затем по вашему индексу. html добавьте этот скрипт.

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

И createBrowerWindow с nodeIntegration как истинным на вашем главном. js.

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>);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...