Destructuring API Responses

Destructuring API Data

Destructure API responses immediately to pull out only the fields you need, documenting expected shape at the point of use.

Example

const res = await fetch("/api/users/1").then(r => r.json());
const { id, name, email, role = "user", profile: { avatar = null } = {} } = res;
// Array of records
const { data: users = [], meta: { total, page } = {} } = await getUsers();
users.forEach(({ id, name }) => console.log(id, name));

JAVASCRIPT

Full Editor

Pro Tip

Destructuring API responses with defaults makes code resilient to missing optional fields.

Related Resources

JavaScript Reference

Complete tag & property list

JavaScript How-To Guides

Step-by-step practical guides

JavaScript Exercises

Practice what you've learned