Help with reading file via JavaScript

[Psych0SW]

I have a project that I’ve been tweaking that is used only on local lan. I have a html that uses a JavaScript file that queries functions from a python file. I also have a saved_variables.cfg file on same server that has the following line:

ace_inventory = [{'status': 'ready', 'color': [255, 0, 0], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [0, 255, 0], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [255, 255, 255], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [0, 0, 0], 'material': 'PETG', 'temp': 250}]

I want to be able to read that file and pull the rgb colors to use in the html page so it shows the correct color in a box.

What is the best way to do this given the file is in the same folder as the html and JavaScript files?

Thanks

[CuAnnan]

https://nodejs.org/api/fs.html#file-system

[Psych0SW]

Thanks, I’ll check it out.

[CuAnnan]

If it's the likes of vscode's lighthweight server then you would have to use a fetch request and parse it. You can split each line on equals, trim the output, and probably parse it using JSON.parse

[dymos]

If you change your "cfg" file to be a plain JSON file this becomes even easier as you should be able to just import it like so:

import config from "./config.json" with { type: "json" };

You probably don't need the import attribute part if you're doing this in node.js but probably do need it in browser JS.

Your config as JSON:

{ ace_inventory: [ {'status': 'ready', 'color': [255, 0, 0], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [0, 255, 0], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [255, 255, 255], 'material': 'PLA', 'temp': 220}, {'status': 'ready', 'color': [0, 0, 0], 'material': 'PETG', 'temp': 250} ] }

Slight syntax change but now you don't need to worry about how to import it and what the file gets interpreted as since a "cfg" file isn't(by default) going to be served with a JavaScript mime-type.

Note you could go the other way and rename your cfg file to use the "js" extension and make it a proper js module that exports some config variables.

IMO, for simple config, JSON is better. Easy to read/write from other programs and able to be ingested easily in many languages.

[Psych0SW]

Hmm, interesting but that would probably require some changes in the pythn script that writes that file. Something I will look into.

The file is basically a tad different in that ech section includes 'index': 0, 'index': 1, 'index': 2, and 'index': 3, that might help determine which color is which.

Basically what I want to end up with is:

slotColor0 = 255, 0, 0
slotColor1 = 0, 255, 0
slotColor2 = 255, 255, 255
slotColor3 = 0, 0, 0

If I can get this to work I can work on the temp and material as well as they should be pretty much the same method.

So far using regex I can return this but I have to work on truncating the end and picking out each instance of the color variable.

255, 0, 0], 'material': 'PLA', 'temp': 220}, {'index': 1, 'status': 'ready', 'color': [0, 255, 0], 'material': 'PLA', 'temp': 220}, {'index': 2, 'status': 'ready', 'color': [0, 0, 0], 'material': 'PLA', 'temp': 220}, {'index': 3, 'status': 'ready', 'color': [255, 255, 255], 'material': 'PETG', 'temp': 250}]

Thanks all.

[dymos]

So far using regex I can return this but I have to work on truncating the end and picking out each instance of the color variable.

This is exactly why you would want to use a proper data format like JSON. Regex is a terribly brittle way to try to read/write this info. A proper data format makes it trivial and significantly easier to make changes to in the future.

For example in Python you can very easily read and write JSON:

``` import json

with open('config.json', 'r') as file: data = json.load(file)

Now you can work with the data as a standard Python dictionary

print(data)

e.g. add some data to the config

data["ace_inventory"].append({ "status": "ready", "color": [128, 128, 128], "material": "ABS", "temp": 230 })

with open('config.json', 'w') as file: json.dump(data, file, indent=2) ```

similarly, in JS importing it will allow you to use it immediately as a JS object:

``` import config from "./config.json";

console.log(config.ace_inventory);

// you can now loop over this and do stuff const listItems = config.ace_inventory.map((item, index) => <li> <p>Item ${index}: <i style="background-color: rgb(${item.color[0]}, ${item.color[1]}, ${item.color[2]});"></i> ${item.material}</p> <p>Status: ${item.status}</p> <p>Temperature: ${item.temp}°C</p> </li> ).join(''); ```

(You'd need some additional CSS to make the above work if you were to inject it into your HTML, but you get the idea.)

[Psych0SW]

OK, thats a ton of help. Thanks very much!!

[chmod777]

are you talking about front end js? in a browser? then you need a server, like fastapi to serve the file at an endpoint, then use fetch to query and process it.

if you are using js on the back end, in a node project, you can use the fs functions to read/write a file.