for Node.js/Express, and assuming these are already installed. if not using Node.js/Express, adapt instructions to language.\
- app reads a CSV with golf quotes. find it here on Github.
- randomly selects one
- packs it into a JSON object and sends into the void through HTTP request. example:
{"id":"8","quote":"I know I am getting better at golf because I am hitting fewer spectators.","author":"Gerald Ford","tags":"golf"}
-
in app.js of main app, write:
const axios = require('axios');
-
install new dependency:
npm install axios
-
set up axios call, in this example, I wanted the data in the header of my main app and wrote this in my main.js file, adapt to yours:
async function fetchData() { try { const response = await axios.get( 'https://arcane-hollows-29475-7828051692ff.herokuapp.com/random-quote-golf' ); return response.data; } catch (error) { console.error('Error fetching data from microservice:', error); } } async function showQuote() { const data = await fetchData(); const { quote, author } = data; const quoteAuthor = document.getElementById('quoteAuthor'); quoteAuthor.innerHTML = `<p>"${quote}"</p><p> (${author})</p>`; quoteAuthor.classList.toggle('show'); }
-
the above call the JSON object. on the header.hbs page, I then called the showQuote()-function:
<button id="popupTrigger" class="popup" onclick="showQuote()">
and that was it!