How to pass js-variable from .js file to .html page in Electron?

Question

I'm developing electron app for the first time. I use function in .js file to find all files in folder and to write all of them to console.

fs.readdir(save_path, function(err, files) {
    if (err) {

    } else {
       for(let projectFile of files)
       {
           fs.readFile(save_path+"\\"+projectFile, function(err, data)
           {
                if(data != null)
                {
                    console.log(projectFile);
                }
            });
       }
    }
});

But is there any way to send this projectFile variable to html page? Because there is for loop, so I need to use for loop in html too I guess.

<div class="col-sm-3 text-center" style="background: #34495e; height:2160px;">
        <p class="b wh" style="margin-top: 15%;">Latest projects</p>
        <!-- Projects should be displayed here. I guess there should be some kind of for loop -->
        <hr class="divider">
    </div>

Thank you!

Have a look at templates.

Jonas Wilms
– Jonas Wilms

2018-02-18 16:00:49 +00:00
Commented Feb 18, 2018 at 16:00 — Jonas Wilms
– Jonas Wilms, Commented Feb 18, 2018 at 16:00

slowjack2k · Accepted Answer · 2018-02-21 19:20:31Z

8

One sync solution would be using a shared object like

// within main.js
var entries = fs.readdirSync(save_path+"\\"+projectFile);
global.sharedObj =  { entries : entries };
// before 
app.on('ready', function() ...

<div class="col-sm-3 text-center" style="background: #34495e; height:2160px;">
    <p class="b wh" style="margin-top: 15%;">Latest projects</p>
    <script>
      const {remote} = require('electron');
      const entries = remote.getGlobal('sharedObj').entries;
      for (var i in entries) {
         document.write('<p>' + entries[i] + '</p>');
      }
     </script>
      <hr class="divider">
  </div>

Or you can use messaging via ipcMain and ipcRenderer to do it async.

answered Feb 21, 2018 at 19:20

slowjack2k

2,5861 gold badge17 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raphael Morgan Over a year ago

I tried doing this and got an error (in the Electron app itself/devtools, not the console running the app) that require isn't allowed. do you know what's up with that?

slowjack2k Over a year ago

Sorry, I didn't follow up with electron. Around 2021 they did change some security settings around context isolation. But I can't say how to solve the issue.

Collectives™ on Stack Overflow

How to pass js-variable from .js file to .html page in Electron?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related