# JavaScript: Pull Contacts from an API into a Table

> A beginner JavaScript walkthrough in the free JSFiddle: fetch contact data from a free practice API and show name, company and email in a table, typing…

Source: https://learn.ynteractive.com/content/js-api-contacts-table · Updated 2026-10-24 · Free from Stepthrough (https://learn.ynteractive.com)

## Practice it step by step

[Start the free practice](https://learn.ynteractive.com/modules/js-api-contacts-table)

[Take the free module: why it matters, practice and a quick check →](https://learn.ynteractive.com/courses/javascript-for-small-business/3)

You do every step yourself in a practice copy of JSFiddle. It checks your work as you go, and “Do it for me” finishes any step you get stuck on. Free, about 12 minutes, and nothing touches your real accounts. [Open full screen](https://learn.ynteractive.com/modules/js-api-contacts-table)

Free · Live now · [JavaScript](https://learn.ynteractive.com/content/course/javascript) · [JSFiddle](https://learn.ynteractive.com/content/tool/jsfiddle) · ~12 min · 9 steps · Beginner

Updated October 24, 2026. Built against the tool’s current screens and checked step by step. [How we check this lesson](https://learn.ynteractive.com/content/about#how-we-check)

A beginner [JavaScript](https://learn.ynteractive.com/content/glossary/javascript) walkthrough in the free JSFiddle: [fetch](https://learn.ynteractive.com/content/glossary/fetch-api) contact data from a free practice [API](https://learn.ynteractive.com/content/glossary/api) and show name, company and email in a table, typing every line yourself.

## At a glance

| Question | Answer |
| --- | --- |
| What you build | A beginner JavaScript walkthrough in the free JSFiddle: fetch contact data from a free practice API and show name, company and email in a table, typing every line yourself. |
| Tools | JSFiddle |
| Time | About 12 minutes, 9 steps in 3 parts |
| Level | Beginner, no coding needed |
| Cost | Free |
| Ways to learn it | [Practice it step by step](https://learn.ynteractive.com/modules/js-api-contacts-table) |

### The 3 parts, in short

1. Look at the data: Find the fields you need.
2. Fetch it: A heading and an empty table, The address and the table, Fetch the data.
3. Build the table: Header row and a loop, One row per contact, Call it, Tidy the code, and 1 more step.

**Start here first:** [JavaScript: An Instant Quote Calculator for Your Website](https://learn.ynteractive.com/content/js-quote-calculator) (module 1 of JavaScript)

## What you'll build

Most business tools, from CRMs to accounting apps, share their data through an API: a web address that answers with data instead of a page. A sales assistant who copies contacts from the CRM into a spreadsheet by hand every week can let ten lines of JavaScript do it. In this lesson you fetch ten made-up contacts from JSONPlaceholder, a free practice API, and show them in a table in [JSFiddle](https://learn.ynteractive.com/content/tool/jsfiddle). You type every line yourself.

Ten contacts, each with a name, a company and an email, read from an API and written into a table by your own code. A real CRM API works the same way, plus a key that proves who you are. Do it in JSFiddle yourself: the lesson page has the checklist.

- Tools: JSFiddle
- Time: about 12 minutes, 9 steps in 3 chapters
- Level: beginner, no coding needed
- Price: free

## Practice first, then build it for real

Practice copy built from real JSFiddle screens (jsfiddle.net, captured 24 October 2026). Every line of code in it was typed and run there. The business and its numbers are made up; the ad box on the left is blurred. To build it for real you need your own JSFiddle account, and some services charge once you use them for real work, so check each tool's current pricing.

## Try it yourself, free

Reading the steps is a start. Doing them is how it sticks. The interactive module walks you through every click in a practice copy of JSFiddle, checks each step, and never touches your real accounts.

[Start “JavaScript: Pull Contacts from an API into a Table”](https://learn.ynteractive.com/modules/js-api-contacts-table)

## Step by step: JavaScript: Pull Contacts from an API into a Table

All 9 steps of the interactive module, in order. In the module you watch each one, then do it yourself in a practice copy that checks your work.

### 1. Look at the data

1. **Find the fields you need.** This is **jsonplaceholder.typicode.com/users** opened in the browser: ten made-up users as JSON, the format almost every API answers in. Each user has a **name**, an **email** and, inside **company**, a company **name**. Click the **"company"** line.
   This is a free practice API. Each user has a name, an email, and a company with its own name.

### 2. Fetch it

2. **A heading and an empty table.** Open **jsfiddle.net** (no account needed). In the **HTML** panel type a heading and an empty table. JSFiddle often adds the closing tag for you as you type; if you end up with a doubled one or a stray >, delete it.
3. **The address and the table.** In the **JavaScript** panel type the API address and find the table.
4. **Fetch the data.** Leave a blank line. **fetch** asks the address for the data; **await** waits for the answer; **.json()** turns it into a list you can use.
   Fetch asks the address for the data, await waits for the answer, and json turns it into a list.

### 3. Build the table

5. **Header row and a loop.** Write the header row, then start a loop that runs once for each user.
6. **One row per contact.** Add a row with the three fields, then close the loop and the function. **u.company.name** reaches inside company for its name.
   Add one row per user with the name, the company name and the email. Then close the loop and the function.
7. **Call it.** Leave a blank line and call the function, so it runs when the page loads.
   Call load, so it runs when the page opens.
8. **Tidy the code.** Point at the JavaScript panel and click the **tidy** icon.
9. **Run it.** Click **Run**.

## Screenshots

[Start this module free](https://learn.ynteractive.com/modules/js-api-contacts-table)

- Previous in JavaScript: [JavaScript: Turn Invoice Dates into Due-Date Reminders](https://learn.ynteractive.com/content/js-due-date-reminders)

## More in JavaScript

- [JavaScript: An Instant Quote Calculator for Your Website](https://learn.ynteractive.com/content/js-quote-calculator): A beginner JavaScript walkthrough in the free JSFiddle: a four-line HTML form and a few lines of JavaScript that turn square feet into a price, with a minimum charge…

[All 3 modules in JavaScript](https://learn.ynteractive.com/content/course/javascript)

## Free cheat sheet

Print it or save the PDF: the key steps and checks from this lesson on one page, free.

- [JavaScript for Small Business Cheat Sheet](https://learn.ynteractive.com/content/cheat-sheets/javascript-small-business): A free one-page JavaScript cheat sheet: find page elements, write a price rule, add days to dates and fetch API data into a table.

[All free printable cheat sheets](https://learn.ynteractive.com/content/cheat-sheets)

## Terms in this lesson

Plain-English definitions, each with an example from a free lesson.

[fetch (JavaScript)](https://learn.ynteractive.com/content/glossary/fetch-api) · [JavaScript](https://learn.ynteractive.com/content/glossary/javascript) · [API](https://learn.ynteractive.com/content/glossary/api) · JSON · [Header row](https://learn.ynteractive.com/content/glossary/header-row)

[The full AI glossary](https://learn.ynteractive.com/content/glossary)

## Browse related tutorials

[JavaScript (3)](https://learn.ynteractive.com/content/course/javascript) · [JSFiddle tutorials (3)](https://learn.ynteractive.com/content/tool/jsfiddle)

Want AI working like this in your business? Robert Breen, the instructor behind this lesson, helps small and mid-sized teams put AI assistants, agents and automations to work. [See Ynteractive’s AI consulting](https://ynteractive.com/)