Web-Dev-For-Beginners/translations/en/7-bank-project/3-data

Build a Banking App Part 3: Methods of Fetching and Using Data

Pre-Lecture Quiz

Pre-lecture quiz

Introduction

At the heart of every web application lies data. Data can take various forms, but its primary purpose is to present information to the user. As web apps become more interactive and complex, how users access and interact with this information has become a critical aspect of web development.

In this lesson, we’ll explore how to fetch data from a server asynchronously and use it to display information on a web page without reloading the HTML.

Prerequisite

Before starting this lesson, you should have completed the Login and Registration Form section of the web app. Additionally, you need to install Node.js and run the server API locally to access account data.

To verify that the server is running correctly, execute the following command in a terminal:

curl http://localhost:5000/api
# -> should return "Bank API v1.0.0" as a result

---

AJAX and Data Fetching

Traditional websites update the displayed content when a user clicks a link or submits a form by reloading the entire HTML page. Each time new data is needed, the web server sends back a completely new HTML page, which the browser processes. This interrupts the user’s current action and limits interactions during the reload. This workflow is known as a Multi-Page Application or MPA.

As web applications became more complex and interactive, a new technique called AJAX (Asynchronous JavaScript and XML) was introduced. AJAX allows web apps to send and retrieve data from a server asynchronously using JavaScript, without reloading the HTML page. This results in faster updates and smoother user interactions. Once new data is received from the server, the current HTML page can be updated using JavaScript and the DOM API. Over time, this approach evolved into what we now call a Single-Page Application or SPA.

When AJAX was first introduced, the only available API for fetching data asynchronously was XMLHttpRequest. Modern browsers, however, now support the more convenient and powerful Fetch API, which uses promises and is better suited for handling JSON data.

While all modern browsers support the Fetch API, if you want your web app to work on older browsers, it’s a good idea to check the compatibility table on caniuse.com first.

Task

In the previous lesson, we implemented the registration form to create an account. Now, we’ll add code to log in using an existing account and fetch its data. Open the app.js file and add a new login function:

async function login() {
  const loginForm = document.getElementById('loginForm')
  const user = loginForm.user.value;
}

Here, we start by retrieving the form element using getElementById(), and then we get the username from the input field using loginForm.user.value. Each form control can be accessed by its name (set in the HTML using the name attribute) as a property of the form.

Similar to what we did for registration, we’ll create another function to perform a server request, but this time to retrieve account data:

async function getAccount(user) {
  try {
    const response = await fetch('//localhost:5000/api/accounts/' + encodeURIComponent(user));
    return await response.json();
  } catch (error) {
    return { error: error.message || 'Unknown error' };
  }
}

We use the fetch API to request data asynchronously from the server. This time, we don’t need any additional parameters other than the URL, as we’re only querying data. By default, fetch creates a GET HTTP request, which is exactly what we need here.

✅ encodeURIComponent() is a function that escapes special characters for URLs. What problems might arise if we don’t use this function and directly include the user value in the URL?

Next, let’s update our login function to use getAccount:

async function login() {
  const loginForm = document.getElementById('loginForm')
  const user = loginForm.user.value;
  const data = await getAccount(user);

  if (data.error) {
    return console.log('loginError', data.error);
  }

  account = data;
  navigate('/dashboard');
}

Since getAccount is an asynchronous function, we use the await keyword to wait for the server’s response. As with any server request, we also need to handle errors. For now, we’ll simply log the error message and revisit this later.

We then need to store the data somewhere so we can use it to display information on the dashboard. Since the account variable doesn’t exist yet, we’ll create a global variable for it at the top of our file:

let account = null;

Once the user data is saved in a variable, we can navigate from the login page to the dashboard using the navigate() function we already have.

Finally, we need to call our login function when the login form is submitted. Modify the HTML as follows:

<form id="loginForm" action="javascript:login()">

Test everything by registering a new account and logging in with the same account.

Before moving on, let’s complete the register function by adding this at the bottom:

account = result;
navigate('/dashboard');

✅ By default, browsers only allow server APIs to be called from the same domain and port as the web page being viewed. This is a security mechanism enforced by browsers. But wait—our web app runs on localhost:3000, while the server API runs on localhost:5000. Why does it work? By using a technique called Cross-Origin Resource Sharing (CORS), it’s possible to perform cross-origin HTTP requests if the server includes special headers in its response, allowing exceptions for specific domains.

Learn more about APIs by taking this lesson

Update HTML to Display Data

Now that we have the user data, we need to update the existing HTML to display it. We already know how to retrieve an element from the DOM using methods like document.getElementById(). Once you have a base element, here are some APIs you can use to modify it or add child elements:

• Use the textContent property to change the text of an element. Note that changing this value removes all the element’s children (if any) and replaces them with the provided text. This makes it an efficient way to remove all children of an element by assigning an empty string '' to it.

• Use document.createElement() along with the append() method to create and attach one or more new child elements.

✅ The innerHTML property can also be used to change an element’s HTML content, but it should be avoided as it’s vulnerable to cross-site scripting (XSS) attacks.

Task

Before moving to the dashboard screen, let’s address an issue on the login page. Currently, if you try to log in with a non-existent username, an error message is shown in the console, but nothing changes visually for the user.

Let’s add a placeholder element in the login form to display an error message if needed. A good spot would be just before the login <button>:

...
<div id="loginError"></div>
<button>Login</button>
...

This <div> element is empty, so nothing will appear on the screen until we add content to it. We also assign it an id to make it easy to retrieve with JavaScript.

Go back to the app.js file and create a helper function called updateElement:

function updateElement(id, text) {
  const element = document.getElementById(id);
  element.textContent = text;
}

This function is straightforward: given an element id and text, it updates the text content of the DOM element with the matching id. Let’s use this function to replace the previous error message in the login function:

if (data.error) {
  return updateElement('loginError', data.error);
}

Now, if you try to log in with an invalid account, you should see something like this:

While the error message is now visible, screen readers won’t announce it. To make dynamically added text accessible to screen readers, we need to use a Live Region. Here, we’ll use a specific type of live region called an alert:

<div id="loginError" role="alert"></div>

Apply the same behavior to the register function errors (and don’t forget to update the HTML).

Display Information on the Dashboard

Using the techniques we’ve just learned, we’ll now display the account information on the dashboard page.

Here’s an example of what an account object received from the server looks like:

{
  "user": "test",
  "currency": "$",
  "description": "Test account",
  "balance": 75,
  "transactions": [
    { "id": "1", "date": "2020-10-01", "object": "Pocket money", "amount": 50 },
    { "id": "2", "date": "2020-10-03", "object": "Book", "amount": -10 },
    { "id": "3", "date": "2020-10-04", "object": "Sandwich", "amount": -5 }
  ],
}

Note: To make testing easier, you can use the pre-existing test account, which already contains data.

Task

Let’s start by modifying the "Balance" section in the HTML to include placeholder elements:

<section>
  Balance: <span id="balance"></span><span id="currency"></span>
</section>

We’ll also add a new section below to display the account description:

<h2 id="description"></h2>

✅ Since the account description serves as a title for the content below it, it’s marked up semantically as a heading. Learn more about the importance of heading structure for accessibility, and review the page to identify other potential headings.

Next, we’ll create a new function in app.js to populate the placeholders:

function updateDashboard() {
  if (!account) {
    return navigate('/login');
  }

  updateElement('description', account.description);
  updateElement('balance', account.balance.toFixed(2));
  updateElement('currency', account.currency);
}

First, we ensure that the account data is available before proceeding. Then, we use the updateElement() function we created earlier to update the HTML.

To make the balance display more user-friendly, we use the toFixed(2) method to ensure the value is displayed with two decimal places.

Now, we need to call the updateDashboard() function whenever the dashboard is loaded. If you’ve already completed the lesson 1 assignment, this should be straightforward. Otherwise, you can use the following implementation.

Add this code to the end of the updateRoute() function:

if (typeof route.init === 'function') {
  route.init();
}

And update the route definitions with:

const routes = {
  '/login': { templateId: 'login' },
  '/dashboard': { templateId: 'dashboard', init: updateDashboard }
};

With this change, the updateDashboard() function will be called every time the dashboard page is displayed. After logging in, you should see the account balance, currency, and description.

Create Table Rows Dynamically with HTML Templates

In lesson 1, we used HTML templates along with the appendChild() method to implement navigation in our app. Templates can also be used for smaller, repetitive parts of a page.

We’ll use a similar approach to display the list of transactions in the HTML table.

Task

Add a new template to the HTML <body>:

<template id="transaction">
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</template>

This template represents a single table row with three columns: date, object, and amount of a transaction.

Next, add an id property to the <tbody> element of the table in the dashboard template to make it easier to find with JavaScript:

<tbody id="transactions"></tbody>

Now that the HTML is ready, let’s switch to JavaScript and create a new function called createTransactionRow:

function createTransactionRow(transaction) {
  const template = document.getElementById('transaction');
  const transactionRow = template.content.cloneNode(true);
  const tr = transactionRow.querySelector('tr');
  tr.children[0].textContent = transaction.date;
  tr.children[1].textContent = transaction.object;
  tr.children[2].textContent = transaction.amount.toFixed(2);
  return transactionRow;
}

This function does exactly what its name suggests: it uses the template we created earlier to generate a new table row and fills in its contents with transaction data. We’ll use this function in updateDashboard() to populate the table:

const transactionsRows = document.createDocumentFragment();
for (const transaction of account.transactions) {
  const transactionRow = createTransactionRow(transaction);
  transactionsRows.appendChild(transactionRow);
}
updateElement('transactions', transactionsRows);

Here, we use the document.createDocumentFragment() method to create a new DOM fragment. This allows us to work on the fragment before attaching it to the HTML table.

Finally, we need to update the updateElement() function to support more than just text content. Modify its code as follows:

function updateElement(id, textOrNode) {
  const element = document.getElementById(id);
  element.textContent = ''; // Removes all children
  element.append(textOrNode);
}

We use the append() method, which allows us to attach either text or DOM Nodes to a parent element. This makes it versatile for all our use cases. If you try using the test account to log in, you should now see a transaction list on the dashboard 🎉.

---

🚀 Challenge

Work together to make the dashboard page look like a real banking app. If you've already styled your app, try using media queries to create a responsive design that works well on both desktop and mobile devices.

Here's an example of a styled dashboard page:

Post-Lecture Quiz

Post-lecture quiz

Assignment

Refactor and comment your code

---

Disclaimer:
This document has been translated using the AI translation service Co-op Translator. While we aim for accuracy, please note that automated translations may include errors or inaccuracies. The original document in its native language should be regarded as the authoritative source. For critical information, professional human translation is advised. We are not responsible for any misunderstandings or misinterpretations resulting from the use of this translation.