CODEWITHSUNDEEP
javascriptnode.jsjsondebuggingp5.js
NetLordOfData
NetLordOfData

Reputation: 91

How to "p5.js loadJson"(read json) in html file without http request and write fs to json file?

How Do i debug this in order for me to read and write in json file to html without http request?

I have already got the answer from my previous question project "How to use push() into array json file when "mouse click"?" but now I can't even load/read file from json to html by using my p5.js loadjson project, do i missing something? or do I doing it wrong by arrange my code in the right order?

this is my previous answer project> How to use push() into array json file when "mouse click"?

my project use for p5.js loadjson> How to Debug "P5.js + Node.js with Parse Json" file

//my code>

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="sketch8.js"></script>
  </body>
</html>

sketch8.js

function preload() {
    winston = loadJSON("Data2.json");
    }

function setup() {
    createCanvas(400, 400);
  }
  
  function draw() {
   
//JSON parse & fs read Node.js
//    var fs = require('fs');
//    var data = fs.readFileSync('Data2.json');
//    var winston = JSON.parse(data);
//    console.log(winston);
  
    //Test Terminal
  /*
  node sketch7.js
  */
  

  
  
  {
      if (mouseIsPressed) {
          winston.xPositions.push(mouseX);
      } else {
          var data = JSON.stringify(winston, null, 2);
          fs.writeFileSync('Data2.json', data, finished);

          function finished(err) {
            console.log('all set.');
          }
      }
      



      stroke(64, 117, 207);
      fill(196, 33, 255);
      for (var i = 0; i < winston.xPositions.length; i++) { 
          line(winston.xPositions[i], 120, 194, 285);
          ellipse(winston.xPositions[i], 104, 32, 46);
      }
  }
  
  fill(0, 0, 0);
  textSize(16);
  text("Winston likes " + winston.likes[0] + " and " +  winston.likes[1], 10, 90);
  
  };//<

Data2.json

{
    "likes": ["programming", "being programmed"],
    "xPositions": [100, 200]
}

//<my code

After remove the else statement

if I remove the else statement then I can read json file, but that will remove reason to write, I want to "read and write" to json file to html

      if (mouseIsPressed) {
          winston.xPositions.push(mouseX);
      } /*else {
          var data = JSON.stringify(winston, null, 2);
          fs.writeFileSync('Data2.json', data, finished);

          function finished(err) {
            console.log('all set.');
          }
      }
      */ //<else write data to json

The reason i use node without http request cause of this code that I use>

//node code>

app.js 

//Create New File 2>>

var fs = require('fs');

fs.readFile('readMe.txt', 'utf8', function(err, data){
    fs.writeFile('writeMeMe22.txt', data, function(err, result) {
        if(err) console.log('error', err);
      });
});

//Terminal
//node app

readMe.txt 

ya here???

//<node code

as you can see when i use terminal and type node app or node app.js, It create a new file when read file AKA read and write with node, the new file can also be json file as well, like writeMeMe22.txt > writeMeMe22.json

//new file>

writeMeMe22.txt

ya here???

//<new file

Upvotes: 1

Views: 248

Answers (1)

Paul Wheeler
Paul Wheeler

Reputation: 20150

Since sketch8.js is running in a web browser you are not going to be able to use fs.writeFileSync() which is a Node.js function intended for use on the server side. Instead you will want to use saveJSON() to initiate a file download.

Upvotes: 1

Related Questions