Photo by Rubaitul Azad on Unsplash

GROUP E

Data Exchange & Asynchronous JavaScript

APIs, Fetch API, JSON, and Async JavaScript

Members: Mwesigwa Joshua • Nakakande Margaret • Aimukama Nankunda • Naluwoza Zion

1. Overview: Async JavaScript

When a website needs data from a server without reloading the page, it uses asynchronous JavaScript. Async means the code does not wait or block the page — it keeps running while waiting for data to arrive.

This deck covers five building blocks in one data-flow story:

Server → JSON → Fetch → Promise → Await → Your page

• JSON — the data format

• APIs — the source of the data

• Fetch API — how JavaScript requests it

• Promises — how the wait is represented

• Async/Await — the clean way to write it

2. What Is JSON?

JSON stands for JavaScript Object Notation. It is the most common format for exchanging data between a server and a browser. It looks like a JavaScript object, but it is just text.

{
"name": "Joshua",
"course": "JavaScript",
"group": "E"
}

Key rules:

• Data is written in key-value pairs.

• Keys must be in double quotes, for example “key”.

• Supported values: strings, numbers, objects, arrays, booleans, and null.

3. Converting Objects & Parsing JSON

Two built-in methods handle the conversion between JavaScript objects and JSON text:

• JSON.stringify(obj) — Object → JSON string. Used when sending data to a server.

• JSON.parse(str) — JSON string → object. Used when receiving data from a server.

JSON.stringify({name: "Margaret"})
JSON.parse('{"name":"Zion"}')

Presenter: Mwesigwa Joshua

4. Promises

A promise is a placeholder for data that will be available in the future. It avoids the tangle of nested callbacks known as “callback hell.”

let myPromise = new Promise((resolve, reject) => {
if (success) resolve("Data received");
else reject("Error");
});
myPromise
.then(result => console.log(result))
.catch(error => console.log(error));

The three states of a promise:

• Pending — waiting for the result

• Fulfilled — data received successfully

• Rejected — an error occurred

Presenter: Nakakande Margaret

5. Async / Await

The easier, cleaner way to work with promises. It makes asynchronous code read like ordinary, synchronous code.

async function getData() {
try {
let response = await fetch(
'https://api.example.com/users'
);
let data = await response.json();
console.log(data);
} catch (error) {
console.log("Error:", error);
}
}

• async — declares that the function will use await.

• await — pauses the function until the promise resolves.

The rest of the page keeps running — nothing else is blocked.

Presenter: Naluwoza Zion

6. The Fetch API

Fetch is how modern JavaScript makes HTTP requests to get data from an API. It returns a promise.

GET request

fetch('https://jsonplaceholder.typicode.com/posts/1')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.log('Error:', error));
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: "Aimukama" })
})
.then(res => res.json())
.then(data => console.log(data));

Fetch does not stop the whole page while it waits for the response to arrive.

Presenter: Aimukama Nankunda

7. API Integration

An API (Application Programming Interface) is how two applications talk to each other — for example, a website using a weather API to get weather data.

• 1. Get the API endpoint URL.

• 2. Use fetch() to request data.

• 3. Convert the response to JSON with .json().

• 4. Use the data in your webpage with DOM manipulation.

Try it yourself: https://jsonplaceholder.typicode.com/users

Presenter: Naluwoza Zion