Why this matters
Most business tools (CRMs, accounting, booking and support apps) share their data through an API: a web address that answers with data instead of a page. Without one, someone copies contacts from one system into a spreadsheet by hand every week.
In this module you read ten made-up contacts from JSONPlaceholder, a free practice API, and show their name, company and email in a table on your own page, with about ten lines of JavaScript that you type yourself in JSFiddle.
What you’ll build
A Client contacts table filled from an API: ten rows, each with a name, a company name and an email.
The same pattern (fetch, read the JSON, loop, write a row) works for any API that returns a list.
What you need
- Nothing to start the practiceThe practice is built from real screens and runs in this page.
- A browser, to do it for realJSFiddle is free and needs no account; JSONPlaceholder needs no key.
Concepts
3 ideas you’ll use in the practice.
An API is a web address for data
Open jsonplaceholder.typicode.com/users in a browser and you see JSON: a list of users, each with a name, an email and a company that has its own name. That nesting is why the code says u.company.name.
Real business APIs work the same way but ask for an API key to prove who you are. Never put a real key in code that others can see, such as a public fiddle.
fetch and await
fetch(url) asks the address for its data. The answer takes a moment, so await waits for it, and response.json() turns the text into a list your code can loop over. await only works inside a function marked async.
Writing rows into a table
table.innerHTML = ... writes the header row. Then for (const u of users) { ... } runs once per user, and table.innerHTML += ... adds one row each time with u.name, u.company.name and u.email.
Practice
Do every step yourself in a practice copy of the real tool. It checks your work, and “Do it for me” finishes any step you get stuck on.
Do it for real
Now repeat it in your own account. Tick each step as you go.
Quick check
3 questions to check you’ve got it.
1. Why does the code say u.company.name and not u.company?
- company is a list
- company is a group of fields, and its name is one of them
- It is a typing mistake
Show the answer
company is a group of fields, and its name is one of them. In the JSON, company holds name, catchPhrase and bs; .name picks the company name out of it.
2. What does await do in front of fetch(url)?
- Makes it faster
- Waits for the answer before the next line runs
- Saves the data to a file
Show the answer
Waits for the answer before the next line runs. The data arrives a moment later; without await the next line would run before it arrived.
3. A real CRM API asks for a key. Where should it not go?
- In a public fiddle or web page anyone can read
- In a secure server setting
- In the vendor's settings page
Show the answer
In a public fiddle or web page anyone can read. Anyone who can read the page can copy the key and use your account.
You reached the end of JavaScript for Small Business Jump Start
That completes the JavaScript jump start: a quote calculator, due-date reminders and live data in a table.
Pick your next course →