Using Netlify functions to display dynamic content on page

Support
1

Does anyone have a link to documentation that shows how I could use a Netlify function that runs when my page loads and displays response data in a table on the page?

I have a function working that calls an API and gets the response, but I can’t find a tutorial showing how to trigger the function to run on my page and print the json output to the page as html.

2

A netlify function itself isn’t capable of updating your frontend. You’ll have to fetch the data with javascript and then let your frontend js do the updating for you. So let’s say we have a function that returns a hello world string:

const handler = async (event) => {
  try {
    return {
      statusCode: 200,
      body: JSON.stringify({ message: `Hello world` }),
    }
  } catch (error) {
    return { statusCode: 500, body: error.toString() }
  }
}

module.exports = { handler }

You can call that function from your frontend js and than output a header with hello world in the DOM:

const body = document.querySelector('body');
const header = document.createElement('h1');

fetch('.netlify/functions/hello-world/hello-world.js', {
  method: "GET",
})
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json()
  })
  .then(json => {
    header.innerText = json.message
    body.appendChild(header)
  })
  .catch(error => {console.error(error)})
3

Thank you! That’s exactly what I wanted to know.

1 Like
4

Good to hear! Happy to help