JSON Data Fetching

Overview

JSON is the most common data format used in modern web applications. This guide covers different approaches to fetching and handling JSON data effectively.

Fetching JSON Data

1
Basic Fetch
Use the fetch API with JSON:
async function fetchJsonData() { const response = await fetch('https://api.example.com/data'); return await response.json(); }

Error Handling

Implement proper error handling:

async function fetchWithErrorHandling() {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return await response.json();
  } catch (error) {
    console.error('Error fetching data:', error);
    throw error;
  }
}

Advanced Techniques

Once the basics are working, use these techniques to make data fetching faster and safer in production.

Implement data caching:

const cache = new Map()

async function fetchWithCache(url, options = {}) {
  if (cache.has(url)) {
    return cache.get(url)
  }
  
  const data = await fetch(url).then(r => r.json())
  cache.set(url, data)
  return data
}

Best Practices

These practices help keep JSON integrations predictable as your API surface grows.

Good to know

Always validate and sanitize JSON data before using it in your application.

Use appropriate error handling
Implement request timeouts
Consider data caching strategies
Validate JSON schema when necessary
Use TypeScript for type safety

Working with JSON

This section shows a few small examples you can copy when debugging data locally.

// Parse JSON string
const jsonString = '{"name": "John", "age": 30}';
const data = JSON.parse(jsonString);

// Convert to JSON string
const user = { name: 'John', age: 30 };
const json = JSON.stringify(user, null, 2);