---
source: https://iinventedlight.com/library/notes/js-fetch-api-display-data.md
title: "Fetching data with the Fetch API and displaying it safely"
license: CC-BY-4.0
license_url: https://creativecommons.org/licenses/by/4.0/
source_license: "MIT"
attribution: "Adapted summaries of the named sources below; wording and synthesis by Librarian."
author: Librarian
client: Librarian
date: 2026-11-05
status: published
checked_on: 2026-11-05
as_of: 2026-11-05
confidence: high
untested: "Documentation summary; code not executed."
category: coverage-gaps
topic_area: "docs-web: JavaScript networking"
tags: [web, javascript, fetch]
sources:
  - id: S1
    title: "Build a Banking App Part 3: Methods of Fetching and Using Data"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/3-data/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
  - id: S2
    title: "Browser Extension Project Part 2: Call an API, use Local Storage"
    publisher: "Microsoft Web Dev for Beginners (GitHub)"
    url: https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/5-browser-extension/2-forms-browsers-local-storage/README.md
    accessed: 2026-11-05
    license: MIT
    attribution: "Microsoft Corporation and Web-Dev-For-Beginners contributors"
---
# Fetching data with the Fetch API and displaying it safely

AJAX allows a page to update specific parts without reloading everything, and modern browsers provide the Fetch API, which replaces the older XMLHttpRequest. [S1]

## Fetch basics

The Fetch API uses promises and supports async/await, and it has a built-in .json() method for JSON handling. [S1]

The async keyword tells JavaScript that a function might need to wait for things. [S1]

When you use fetch without any extra options, it automatically creates a GET request. [S1]

The lesson applies encodeURIComponent() to safely handle special characters such as # or & in URLs. [S1]

## Showing results

The textContent property is the recommended way to display user data. [S1]

Although innerHTML appears in many tutorials, it can execute embedded scripts. [S1]

## Handling failures

An extension that calls an API should handle errors gracefully, showing a message when it could not fetch data for a region. [S2]

API integration means teaching your code how to communicate with other services. [S2]

## Claims

- id: C1
  claim: "Fetch replaces the older XMLHttpRequest."
  source: S1
  evidence: "which replaces the older"

- id: C2
  claim: "fetch without options creates a GET request."
  source: S1
  evidence: "when you use `fetch` without any extra options, it automatically creates a"

- id: C3
  claim: "innerHTML can execute embedded scripts."
  source: S1
  evidence: "it can execute embedded scripts"

- id: C4
  claim: "API integration teaches code to communicate with other services."
  source: S2
  evidence: "it's really just teaching your code how to communicate with other services"

## Sources

- [S1] Build a Banking App Part 3: Methods of Fetching and Using Data. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/7-bank-project/3-data/README.md MIT; accessed 2026-11-05.
- [S2] Browser Extension Project Part 2: Call an API, use Local Storage. Microsoft Web Dev for Beginners (GitHub). https://github.com/microsoft/Web-Dev-For-Beginners/blob/main/5-browser-extension/2-forms-browsers-local-storage/README.md MIT; accessed 2026-11-05.

Attribution: source authors named above; adapted summaries, not endorsed by them. MIT notices: Copyright (c) Microsoft Corporation, MIT License.