Save output of a Javascript function

Question

I have a Rails 6 application where I'm interacting with the browser to get some information (getAccount) from a Chrome extension.

On the last line, I do console.log(account), which prints the correct value. However, I want to save the account variable to my database. How would I go about exposing that account variable to Rails so I can send it to the controller and save it?

<%= link_to "Home", root_path %>

<button class="enableEthereumButton">Connect MetaMask</button>
<h2>Account: <span class="showAccount"></span></h2>

<script>
  const ethereumButton = document.querySelector('.enableEthereumButton');
  const showAccount = document.querySelector('.showAccount');

  ethereumButton.addEventListener('click', () => {
    getAccount();
  });

  async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    showAccount.innerHTML = account;
    console.log(account)
  }

</script>

You mean as in telling your server about something from the client? By e.g. making a HTTP request to your server? — Kelvin Schoofs
– Kelvin Schoofs, Commented Aug 6, 2021 at 19:08
Ideally passing the value of account to a Rails controller. — Andy
– Andy, Commented Aug 6, 2021 at 19:13
Fetch/Ajax or traditional form post. You got to get the data back to the server. — epascarello
– epascarello, Commented Aug 6, 2021 at 19:19

Kelvin Schoofs · Accepted Answer · 2021-08-06 19:19:04Z

2

Since Rails runs on the server while this code runs in the browser, you'll need to transmit that data to your backend.

The simplest approach would be making a HTTP POST request to a route on your server, which can directly log the account to your database or do anything else with it.

You could also set up a WebSocket connection between your client and server and exchange information that way, but a simple HTTP POST request is all you really need.

answered Aug 6, 2021 at 19:19

Kelvin Schoofs

8,7462 gold badges17 silver badges34 bronze badges

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

2 Comments

Andy Over a year ago

This is a very helpful explanation. Thank you. Would you mind showing an example code snippet after console.log in the example above? I'm unsure how to make the HTTP POST inside a JS function.

Kelvin Schoofs Over a year ago

You can easily find good guides/tutorials/examples for that on Google. Either using fetch, XMLHttpRequest or many of the libraries based on them.

Andy · Accepted Answer · 2021-08-06 20:09:05Z

Based on Kelvin's guidance, I ended up with the following solution:

<script>
  const ethereumButton = document.querySelector('.enableEthereumButton');
  const showAccount = document.querySelector('.showAccount');

  ethereumButton.addEventListener('click', () => {
    getAccount();
  });

  async function getAccount() {
    const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
    const account = accounts[0];
    showAccount.innerHTML = account;
    console.log(account)

    const response = await fetch('http://localhost:3000/save_eth_address', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      eth_address: account,
    })
  });

  }

</script>

Which sends params to the controller I can easily find and save to the db.

Collectives™ on Stack Overflow

Save output of a Javascript function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related