Interactive Response Viewer¶

The Interactive Response Viewer is a powerful web-based tool for analyzing and exploring API responses from the Danish Parliamentary Open Data API. It provides real-time JSON formatting, syntax highlighting, and advanced data navigation features to help developers and researchers understand the API data structure and debug their queries.

Overview¶

The Response Viewer integrates seamlessly with the Query Builder to provide a complete API testing and exploration experience. When you execute a query through the Query Builder, the response is automatically loaded into the Response Viewer for detailed analysis.

Key Features¶

Real-time JSON formatting with syntax highlighting
Interactive data tree navigation for nested structures
Advanced filtering and search within responses
Multiple export formats (JSON, CSV, XML)
Performance metrics display (response time, data size)
Error handling and debugging tools
Field-level copy functionality
Response comparison tools

Interface Overview¶

Main Components¶

The Response Viewer consists of several interactive panels:


 Response Header & Controls              
$
 Performance Metrics | Export Options    
$

 Formatted JSON Response                 
 (with syntax highlighting)              

$
 Data Navigation & Filter Tools

Response Header¶

The header displays essential request information:

API Endpoint URL - The executed query URL
HTTP Status Code - Response status (200, 400, 500, etc.)
Content Type - Usually application/json
Timestamp - When the request was made

JSON Formatting & Syntax Highlighting¶

Automatic Formatting¶

The viewer automatically formats raw JSON responses for optimal readability:

Before (Raw):

{"value":[{"id":12345,"titel":"Forslag til lov om ændring af lov om miljøbeskyttelse","opdateringsdato":"2025-01-15T10:30:00Z","statusid":25}]}

After (Formatted):

{
  "odata.metadata": "https://oda.ft.dk/api/$metadata#Sag",
  "value": [
    {
      "id": 12345,
      "titel": "Forslag til lov om ændring af lov om miljøbeskyttelse",
      "opdateringsdato": "2025-01-15T10:30:00Z",
      "statusid": 25,
      "typeid": 3,
      "offentlighedskode": "O"
    }
  ]
}

Syntax Highlighting¶

The viewer uses color-coded syntax highlighting to distinguish between:

Property names - Blue text
String values - Green text
Numeric values - Orange text
Boolean values - Purple text
null values - Gray text
Structural elements - Dark gray ({, }, [, ])

Danish Character Support¶

The viewer fully supports Danish characters (æ, ø, å) commonly found in parliamentary data:

{
  "titel": "Forespørgsel om støj fra biler på motorveje",
  "beskrivelse": "Spørgsmål til ministeren om trafiklærm",
  "afsender": "Miljøudvalget"
}

Interactive Tree View¶

Large responses can be explored using the collapsible tree structure:

=Ä Response Root
 =Ê odata.metadata
 =È odata.count: 1,247
 =Á value (array of 10 items) ¼
     =Ä Item 0 ¼
        =" id: 12345
        =Ý titel: "Forslag til lov..."
        =Å opdateringsdato: "2025-01-15T10:30:00Z"
        = Sagsstatus ¼
            =" id: 25
            =Ý status: "Under behandling"
     =Ä Item 1 ¶

Expand All - Opens all nested objects and arrays
Collapse All - Closes all expandable sections
Auto-expand to Level - Expands to a specific nesting depth
Jump to Path - Navigate directly to a specific JSON path

Data Filtering and Search¶

Advanced Search Features¶

The search functionality supports multiple query types:

1. Simple Text Search¶

Search: "miljø"  Finds all properties containing "miljø"

2. Property Name Search¶

Search: prop:titel  Finds all "titel" properties

3. Value Type Search¶

Search: type:number  Shows all numeric values
Search: type:date  Shows all date/datetime values

4. Path-based Search¶

Search: path:value[*].Sagsstatus  Finds all Sagsstatus objects

Filter Examples for Parliamentary Data¶

Common Filtering Scenarios:

Find Specific Case Types:

Filter: "typeid": 3  Legislative proposals
Filter: "typeid": 5  Parliamentary questions

Search by Status:

Filter: "statusid": 25  Cases under consideration
Filter: "statusid": 10  Completed cases

Date-based Filtering:

Filter: "opdateringsdato" contains "2025"  Recent updates

Public vs. Confidential:

Filter: "offentlighedskode": "O"  Public cases only

Export Options¶

Available Export Formats¶

1. JSON Export¶

Raw JSON - Original API response
Formatted JSON - Prettified with indentation
Filtered JSON - Only matching search results
Selected Fields - Export specific properties only

// Example: Export only titles and dates
{
  "cases": [
    {
      "titel": "Forslag til lov om miljøbeskyttelse",
      "opdateringsdato": "2025-01-15T10:30:00Z"
    }
  ]
}

2. CSV Export¶

Automatically flattens nested JSON structures:

id	titel	opdateringsdato	Sagsstatus.status
12345	Forslag til lov...	2025-01-15T10:30:00Z	Under behandling
12346	Forespørgsel om...	2025-01-14T15:20:00Z	Afsluttet

3. XML Export¶

Converts JSON to XML format compatible with other tools:

<?xml version="1.0" encoding="UTF-8"?>
<response>
  <metadata>https://oda.ft.dk/api/$metadata#Sag</metadata>
  <value>
    <item>
      <id>12345</id>
      <titel>Forslag til lov om ændring af lov om miljøbeskyttelse</titel>
      <opdateringsdato>2025-01-15T10:30:00Z</opdateringsdato>
    </item>
  </value>
</response>

Export Options Dialog¶

When clicking the export button, you can configure:

Format selection (JSON/CSV/XML)
Data filtering (all data vs. search results)
Field selection (all fields vs. specific fields)
Encoding options (UTF-8, UTF-16)
Compression (ZIP for large datasets)

Performance Metrics Display¶

Real-time Performance Data¶

The viewer displays comprehensive performance metrics:

Response Time Breakdown¶


 =R Total Request Time: 157ms    
$
 DNS Lookup:        12ms         
 Connection:        23ms         
 SSL Handshake:     34ms         
 Server Response:   88ms

Data Size Analysis¶


 =Ê Response Size Analysis       
$
 Raw Size:         45.2 KB       
 Compressed:       12.8 KB       
 Compression:      71.6%         
 Records Returned: 10            
 Average per Record: 4.52 KB

Performance Rating¶

The viewer provides quality assessments:

=â Excellent (< 100ms): Response time optimal
=á Good (100-500ms): Response time acceptable
=à Fair (500ms-2s): Response time slow
=4 Poor (> 2s): Response time very slow

Historical Performance Tracking¶

Track performance trends across multiple requests:

Response Time History (Last 10 Requests)
200ms      Ï
         Ï   Ï
150ms  Ï       Ï
                 Ï
100ms              Ï Ï
                     Ï   Ï
 50ms 
      1 2 3 4 5 6 7 8 9 10

Error Response Handling¶

Comprehensive Error Display¶

The viewer intelligently handles different types of API errors:

1. HTTP Error Responses¶

400 Bad Request Example:

{
  "error": {
    "code": "BadRequest",
    "message": {
      "lang": "en-US",
      "value": "Invalid filter expression 'year(opdateringsdato) equ 2025'. Expected 'eq' instead of 'equ'."
    },
    "innererror": {
      "type": "Microsoft.Data.OData.ODataException",
      "message": "Invalid operator 'equ'"
    }
  }
}

Enhanced Error Display:

L HTTP 400: Bad Request

=
 Error Details:
  Type: Invalid Filter Expression
  Issue: Operator 'equ' should be 'eq'

=¡ Suggested Fix:
  Change: year(opdateringsdato) equ 2025
  To:     year(opdateringsdato) eq 2025

= More Info: OData Filter Documentation

2. Network Errors¶

< Network Error: Connection Timeout

   Possible Causes:
  " API server temporarily unavailable
  " Network connectivity issues
  " Request timeout (> 30 seconds)

=' Troubleshooting Steps:
  1. Check your internet connection
  2. Try a simpler query with fewer results
  3. Check API status at status.ft.dk
  4. Retry in a few minutes

3. CORS Errors (Browser-specific)¶

=« CORS Policy Error

9  Explanation:
  Browser security prevents direct API calls from this domain.

 Recommended Solutions:
  1. Use a REST client (Postman, Insomnia)
  2. Make requests from your server-side code
  3. Use a CORS proxy for testing

=Ë Copy cURL Command:
  curl "https://oda.ft.dk/api/Sag?$top=10"

Error Resolution Helper¶

Interactive error resolution assistance:

Automatic Error Detection - Identifies common mistakes
Suggested Fixes - Provides corrected query examples
Documentation Links - Links to relevant help sections
Copy-to-Clipboard - Easy copying of corrected queries

Nested Data Exploration Tools¶

Deep Object Traversal¶

For complex nested structures like expanded relations:

{
  "value": [
    {
      "id": 12345,
      "titel": "Environmental Protection Amendment",
      "SagAktør": [
        {
          "Aktør": {
            "navn": "Lars Larsen",
            "Aktørtype": {
              "type": "Politiker"
            }
          }
        }
      ]
    }
  ]
}

Path Navigator¶

Shows the current location in the JSON structure:

Root  value  [0]  SagAktør  [0]  Aktør  navn

Reference Links¶

For related entity IDs, the viewer can generate quick links:

=" aktørid: 15678
    = View Actor Details: /api/Aktør?$filter=id eq 15678

=" sagid: 12345  
    = View Case Details: /api/Sag?$filter=id eq 12345

Copy Functionality¶

Granular Copy Options¶

Copy specific parts of the response at multiple levels:

1. Full Response Copy¶

// Copies entire formatted JSON
{
  "odata.metadata": "https://oda.ft.dk/api/$metadata#Sag",
  "value": [...]
}

2. Single Field Copy¶

// Click on any field to copy just its value
"Forslag til lov om ændring af lov om miljøbeskyttelse"

3. Object Path Copy¶

// Copy specific nested objects
response.value[0].SagAktør[0].Aktør.navn

4. Array Element Copy¶

// Copy individual array elements
{
  "id": 12345,
  "titel": "Forslag til lov om ændring af lov om miljøbeskyttelse",
  "opdateringsdato": "2025-01-15T10:30:00Z"
}

Smart Copy Features¶

Auto-formatting - Maintains proper JSON structure
Encoding preservation - Preserves Danish characters
Contextual menus - Right-click for copy options
Keyboard shortcuts - Ctrl+C for selected elements
Copy notifications - Visual feedback on successful copy

Real-time Response Analysis¶

Live Data Insights¶

As you explore responses, the viewer provides real-time analysis:

Data Quality Metrics¶

=Ê Data Quality Report
  All required fields present
    2 records missing 'beskrivelse'
  Date formats consistent
    1 suspicious null value in 'titel'

Structure Analysis¶

<×  Structure Analysis
 =Á Objects: 25 total
 =Ë Arrays: 5 total  
 = Nested levels: 3 max depth
 = Unique properties: 12 distinct

Content Statistics¶

=È Content Statistics
 =$ Text fields: 15 (avg: 45 chars)
 =" Numeric fields: 8 (range: 1-50000)
 =Å Date fields: 4 (span: 2020-2025)
 = Reference IDs: 12 distinct

Advanced Features¶

Response Comparison¶

Compare multiple API responses side-by-side:

Query A: /api/Sag?$filter=typeid eq 3     Query B: /api/Sag?$filter=typeid eq 5
<
Results: 1,247 cases                      Results: 892 cases
Avg Response Time: 145ms                  Avg Response Time: 98ms  

Common Fields:                            Unique to B:
  - id                                     - spørgsmalstekst
  - titel                                 - svarfrist
  - opdateringsdato

Data Validation¶

Validate responses against expected schemas:

 Schema Validation: PASSED
  Required fields present
  Data types correct
    Optional field 'beskrivelse' missing in 2 records
  Foreign key references valid

Custom Views¶

Create and save custom response views:

Simplified View - Hide technical metadata
Developer View - Show all technical details
Researcher View - Highlight content fields
Debug View - Show performance and validation info

Integration Examples¶

With Query Builder¶

// Query Builder automatically loads results into Response Viewer
const query = buildQuery({
  entity: 'Sag',
  filter: 'year(opdateringsdato) eq 2025',
  expand: 'Sagsstatus,Sagstype',
  top: 10
});

// Response automatically appears in viewer with:
//  Formatted JSON
//  Performance metrics  
//  Interactive navigation

Programmatic Access¶

// Access viewer data programmatically
const viewer = document.querySelector('.response-viewer');
const responseData = viewer.getResponseData();
const metrics = viewer.getPerformanceMetrics();
const searchResults = viewer.search('miljø');

Browser Support¶

The Response Viewer works in all modern browsers:

Chrome 80+ - Full feature support
Firefox 75+ - Full feature support
Safari 13+ - Full feature support
Edge 80+ - Full feature support

Feature Degradation¶

For older browsers: - Copy functionality - Falls back to text selection - Syntax highlighting - Uses basic text formatting - Export features - Downloads as text files

Keyboard Shortcuts¶

Efficient navigation using keyboard shortcuts:

Shortcut	Action
`Ctrl + F`	Open search dialog
`Ctrl + E`	Expand all nodes
`Ctrl + C`	Collapse all nodes
`Ctrl + J`	Jump to JSON path
`Ctrl + S`	Export response
`Esc`	Close dialogs
`/`	Navigate response tree
`Enter`	Expand/collapse selected node

Performance Tips¶

Optimizing Large Responses¶

For responses with thousands of records:

Use Pagination - Limit results with $top
Select Specific Fields - Use $select to reduce data size
Virtual Scrolling - Enable for large arrays (1000+ items)
Lazy Loading - Load nested objects on demand

Memory Management¶

The viewer automatically optimizes memory usage:

Response Caching - Stores last 5 responses
Garbage Collection - Clears old data automatically
Lazy Rendering - Only renders visible JSON nodes
Compression - Compresses stored responses

Troubleshooting¶

Common Issues¶

1. Response Not Loading

Problem: Viewer shows "Loading..." indefinitely
Solution: Check browser console for CORS errors
          Use cURL or Postman for direct API testing

2. Formatting Issues

Problem: JSON appears malformed or unreadable
Solution: Check response Content-Type header
          Ensure API returns application/json

3. Search Not Working

Problem: Search returns no results
Solution: Check search syntax
          Use simple text search first
          Verify case sensitivity settings

4. Export Failures

Problem: Export button doesn't work
Solution: Check browser pop-up blocking
          Enable downloads for this site
          Try different export format

Debug Mode¶

Enable debug mode for detailed troubleshooting:

// Enable debug mode in browser console
window.responseViewerDebug = true;

// View debug information
console.log(viewer.getDebugInfo());

Best Practices¶

Efficient API Exploration¶

Start Small - Begin with simple queries ($top=5)
Use Filters - Narrow results before expansion
Check Metadata - Understand available properties
Monitor Performance - Watch response times
Document Findings - Export interesting results

Data Analysis Workflow¶

Execute Query Response loads automatically
Review Metrics Check performance and data quality
Explore Structure Navigate nested relationships
Search & Filter Find specific data points
Export Results Save for further analysis

Security Considerations¶

No Authentication Required - API is publicly accessible
Rate Limiting - Respect API usage limits
Data Privacy - Be mindful of personal information
HTTPS Only - Always use secure connections

Query Builder Guide - Build and test API queries
Live Examples Overview - Interactive tools overview
API Reference - Complete API documentation
OData Filters Guide - Advanced filtering
Performance Optimization - Production usage

The Interactive Response Viewer is a powerful tool for understanding and debugging the Danish Parliamentary Open Data API. Combined with the Query Builder, it provides a complete development and research environment for working with parliamentary data.

For technical support or feature requests, please visit our feedback page.