如何使用 P5.js 读取带有 node.js 的 json 文件答案

【问题标题】：How to read json file with node.js using P5.js如何使用 P5.js 读取带有 node.js 的 json 文件
【发布时间】：2022-02-08 19:42:30
【问题描述】：

我只是想让“花”这个词出现

我有 Node 的测试终端并使用 preload() 和 loadJSON()，它工作得很好，但没有出现花这个词，这意味着“js 文件”不在“json 文件”上运行，但终端在控制台上说它适用于节点（意味着它读取终端上的 json 文件）

我该如何调试？

以下是我在此项目中学习和工作的内容 >

编码火车

10.2：什么是 JSON？第一部分 - p5.js 教程 https://www.youtube.com/watch?v=_NFkzw6oFtQ

8.5：使用 Node.js 将数据保存到 JSON 文件 - 使用文本编程 https://www.youtube.com/watch?v=6iZiqQZBQJY

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Sketch</title>

    <link rel="stylesheet" type="text/css" href="style.css">

    <script src="libraries/p5.min.js"></script>
    <script src="libraries/p5.sound.min.js"></script>
  </head>

  <body>
    <script src="infoJSON5.js"></script>
  </body>
</html>

infoJSON5.js

//var flower;

//function preload() {
//    flower = loadJSON("Data3.json")
    var fs = require('fs');
    var data = fs.readFileSync('Data3.json');
    var flower = JSON.parse(data);
    console.log(flower);
//}
    //Test Terminal
  /*
  node infoJSON5.js
  */

function setup() {
    createCanvas(400, 400);
}
  
  function draw() {
    background(0);

    fill(flower.r, flower.g, flower.b);
    text(flower.name, 10, 50);
  }

Data3.json

    {
"name":"sunflower",
"r":255,
"g":200,
"b":0
}

【问题讨论】：

我认为如果不设置字体，文本将无法工作。证明您可以通过绘制一个框或一些简单的东西而不是文本来获得颜色，然后读取 loadFont 并将 ttf 文件添加到您的项目中。
对不起，我还是新手，所以我不明白你的意思？所以你能用代码来回答吗？

标签： javascript node.js json backend p5.js

【解决方案1】：

JavaScript 本身不进行输入/输出。如果要读取 JSON 文件，则需要使用主机环境提供的 API。不同的宿主环境提供不同的 API。

如果宿主环境是 Node.js，那么如您所见，您可以使用 the fs module。

网络浏览器不同。如果您访问的任何网页都可以从用户磁盘读取文件（由JS代码指定），则会出现重大安全问题。

在网络浏览器中，您可以使用 Ajax 从 URL 获取数据。因此，您可以将 JSON 托管在 Web 服务器上（通常在网页旁边）并从那里读取。 MSN 有一个关于 Using Fetch 的 Ajax 教程。

您也可以使用文件<input> 并让用户从他们的硬盘文件中选择一个JSON（授予读取它的权限），然后使用FileReader API。

【讨论】：

感谢您回答我的问题，我刚刚从另一个问题中得到了答案，所以现在我知道“获取”是什么，您能否解释一下“发布与获取”是什么，因为我的目标是现在在网络浏览器中使用读取的“文件 json”读取数据和写入新数据
如果您有新问题，请将其作为新问题提出，而不是作为对相关答案的评论。那个是duplicate though。
如果您正在执行读写操作，那么您可能应该使用数据库而不是 JSON 文件。（DB中的数据在HTTP响应中发送到浏览器时可以用JSON表示）。
如果你说的是 NO-SQL 那么我还没有使用它，我只想使用“JSON 文件”、HTML、Javascript 来读写文件，而不使用“p5.js loadjson” ，我是否使用“Node.js fs Read Write”来获取和发布，还是必须安装 HTTP 才能读写？抱歉，我是编程新手，这是我想做的，我想在计算机（HTML）中制作一个程序：当我写东西时，写 > 发送到我计算机中的 json 文件，而不是发送到数据库服务器

【解决方案2】：

const myJSON =  {
"name":"sunflower",
"r":255,
"g":200,
"b":0
}
const myObj = JSON.parse(myJSON);



function setup() {
  createCanvas(400, 400);
}

function draw() {
   background(0);

    fill(myJSON.r, myJSON.g, myJSON.b);
    text(myJSON.name, 10, 50);
}

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。