The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing

Categories We Write About

Parse JSON data from APIs into tables

Written by

in

Computer Science

Parsing JSON data from APIs into tables involves several steps, typically done using programming languages like Python or JavaScript. Below is a detailed guide using Python with the requests and pandas libraries, and also an example using JavaScript with HTML tables.

Using Python (with Pandas and Requests)

1. Install Required Libraries

bash
pip install requests pandas

2. Sample Python Script

python
import requests
import pandas as pd

# Sample API endpoint
url = 'https://jsonplaceholder.typicode.com/users'

# Fetch JSON data from API
response = requests.get(url)
data = response.json()

# Convert JSON data to a DataFrame
df = pd.DataFrame(data)

# Display or process as needed
print(df)

# Optional: Save to CSV
df.to_csv('users_table.csv', index=False)

3. Handling Nested JSON

If the JSON contains nested objects, you can normalize them:

python
from pandas import json_normalize

# Normalize nested JSON
df = json_normalize(data)

# Or normalize specific fields
df = json_normalize(data, sep='_')

Using JavaScript (With HTML Table)

1. HTML + JavaScript Example

html
<!DOCTYPE html>
<html>
<head>
  <title>JSON to Table</title>
</head>
<body>
  <table id="data-table" border="1">
    <thead></thead>
    <tbody></tbody>
  </table>

  <script>
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(data => {
        const table = document.getElementById('data-table');
        const thead = table.querySelector('thead');
        const tbody = table.querySelector('tbody');

        // Generate header
        const headers = Object.keys(data[0]);
        const headerRow = document.createElement('tr');
        headers.forEach(key => {
          const th = document.createElement('th');
          th.textContent = key;
          headerRow.appendChild(th);
        });
        thead.appendChild(headerRow);

        // Generate rows
        data.forEach(item => {
          const row = document.createElement('tr');
          headers.forEach(key => {
            const td = document.createElement('td');
            td.textContent = typeof item[key] === 'object' ? JSON.stringify(item[key]) : item[key];
            row.appendChild(td);
          });
          tbody.appendChild(row);
        });
      });
  </script>
</body>
</html>

Use Cases

Dashboards: Display dynamic API data in dashboards.
ETL Pipelines: Extract JSON data, transform it to tabular format, and load into a database.
Data Analysis: Load API data into pandas DataFrames for statistical or machine learning workflows.

Tips

Always validate JSON with json.loads() (Python) or JSON.parse() (JavaScript).
For large datasets, paginate API responses and concatenate tables.
Use JSON Schema or API docs to structure your table headers accurately.

Let me know if you want this adapted to a specific API or format like CSV, SQL, or Excel.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Check Out Our Newest Posts we wrote about

Categories We Write About