Displaying JSON from Last Node on Website

Hi y’all! I have my website set up with two fields that are sent to n8n via Webhook and then make an API request. I get the API response, however, I’m not sure how I can display it to the user who submitted the two fields. Any suggestions how I would display the last node on my website?

You can send the last node’s data by configuring this in the Webhook node:

image

2 Likes

Would I make a standard a standard POST request to the Webhook to get the JSON?

I currently have my request set up like this, however, it hasn’t been working and I’m new to Webhooks so I’m not sure if this is even the right way to go about it:

var requestOptions = {
method: ‘POST’,
redirect: ‘follow’
};

fetch(“https://n8n.testurl.com/webhook-test/test”, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log(‘error’, error));

For this request, your webhook can also simply be GET based.

In which case, your fetch call will become:

fetch(“https://n8n.testurl.com/webhook-test/test”)
.then(response => console.log( response.text() ) );

Do note that the Webhook URL you’ve used here is the Test URL, which works only once, after executing the workflow.

For a permanent setup, use the Production URL (in this case: https://n8n.testurl.com/webhook/test) and then activate the workflow.

1 Like

Hey @liamhb!

@mcnaveen shared an amazing guide that might be helpful Sending Data to n8n via WebHook

1 Like

Hi!
So I currently have my request set up like this:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Javascript</title>
  </head>
  <body>
    <main id="app"></main>
  </body>
</html> 
function getData() {
  fetch("https://n8n.testurl.org/webhook-test/")
    .then(res => {
      return res.json();
    })
    .then(json => {
      console.log(json.data);
      const html = json.data
        .map(function(item) {
          return "<p>" + item.weather_state_name + " " + item.weather_state_abbr + "</p>";
        })
        .join("");
      console.log(html);
      document.querySelector("#app").insertAdjacentHTML("afterbegin", html);
    })
    .catch(error => {
      console.log(error);
    });
}

getData();

However, I’m getting [object Error] { … } when I run the request.

But seems like an issue with the javascript rather than with n8n. Can you try something like below.

async function getData() {
  const res = await fetch("https://n8n.testurl.org/webhook-test/")
  return res.json()
}

console.log(await getData());
1 Like