-2

I just want the word "flower" to show up

I have test terminal for Node and using the preload() and loadJSON(), it work just fine but the word flower not show up, meaning the "js file" does not run on "json file", but the terminal said on console it work for node(meaning it read the json file on terminal)

How do I debug this?

The below is what I use for learning and working on this project >

The Coding Train

10.2: What is JSON? Part I - p5.js Tutorial https://www.youtube.com/watch?v=_NFkzw6oFtQ

8.5: Saving Data to JSON File with Node.js - Programming with Text 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
}
NetLordOfData
  • 73
  • 1
  • 1
  • 6
  • I don't think text will work without setting a font. Prove you can get the color by drawing a box or something simple instead of text, then give loadFont a read and add ttf file to your project. – danh Feb 08 '22 at 03:40
  • sorry i'm still new, so I don't get what you mean? so can you just use code for the answer? – NetLordOfData Feb 08 '22 at 09:21

2 Answers2

0

JavaScript itself doesn't do input/output. If you want to read a JSON file you need to use an API provided by the host environment. Different host environments provide different APIs.

If the host environment is Node.js then, as you've found, you can use the fs module.

Web browsers are different. There would be major security problems if any webpage you visited could read files (specified by the JS code) from the user's disk.

In a web browser, you can use Ajax to fetch data from a URL. So you can host your JSON on a web server (usually alongside the webpage) and read it from there. MSN has a tutorial on Using Fetch for Ajax.

You can also use a file <input> and have the user select a JSON from file their hard disk (giving permission to read it) and then use the FileReader API.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
  • thank for answer my question I just got the answer from my other question as well so now i know what are "Fetch" for, and can you also explain what are "post vs get", because my goal are to read data and write new data using the read "file json" in web browser for now – NetLordOfData Feb 08 '22 at 12:42
  • If you have a *new* question, then ask it as a new question not as a comment on a tangentially related answer. That one is a [duplicate though](https://stackoverflow.com/questions/46585/when-do-you-use-post-and-when-do-you-use-get). – Quentin Feb 08 '22 at 12:44
  • If you're doing reads and writes then you probably should be using a database and not a JSON file. (The data in the DB can be expressed in JSON when it is sent to the browser in the HTTP response). – Quentin Feb 08 '22 at 12:45
  • if you talk about NO-SQL then I'm not using that yet, I just want to read and write file using "JSON file", HTML, Javascript, without using "p5.js loadjson", do I use, Fetch and Post, with "Node.js fs Read Write", or do I have to install HTTP to read and write? sorry I'm new to programing, here is what i want to do, I want to make a program in computer(HTML): when i write something, write > send to json file in my computer, not to DB server – NetLordOfData Feb 10 '22 at 13:09
-1
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);
}
Michael
  • 168
  • 2
  • 18
  • As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Feb 08 '22 at 14:01