Research & Investigation

Research & Investigation

1. DATA INTERFACE

   • Definition
     • How JSON data from an external source (like SWAPI) is presented and interacted with on a website.
   • Presentation Format
     • Data is retrieved in JSON and parsed using JavaScript.
     • Rendered in the browser using HTML elements like <table>, <div>, or custom components.
   • HTML Table Structure
     • Row (<tr>): Represents each individual item (e.g., a character).
     • Column (<td>): Displays specific attributes (e.g., name, height).
     • Heading (<th>): Labels for each attribute shown at the top of the table.
   • Technologies Used
     • HTML: Defines content structure (tables, cards).
     • CSS: Adds styling (colors, spacing, responsiveness).
     • JavaScript (JS)
       • Uses fetch() to access API data.
       • Dynamically updates DOM with data.
       • Example
         • fetch('https://swapi.dev/api/people/') .then(response => response.json()) .then(data => displayData(data.results));
   • Sample Output Display
     • <table> <tr> <th>Name</th> <th>Height</th> <th>Birth Year</th> </tr> <tr> <td>Luke Skywalker</td> <td>172</td> <td>19BBY</td> </tr> </table>
   • Key Features
     • User-friendly layout.
     • Interactive elements like search, filter, or sort.
     • Real-time updates without reloading the page (using asynchronous requests).

2. sDATA STRUCTURE

   • Definition
     • The way API data (typically in JSON format) is structured and used within your system.
   • JSON Format
     • A lightweight, structured data format based on key-value pairs.
     • Ideal for use with JavaScript.
   • Key JSON Features
     • Keys: Always strings (e.g., "name").
     • Values: Can be strings, numbers, arrays, booleans, or nested objects.
   • Example Structure from SWAPI
     • { "name": "Luke Skywalker", "height": "172", "films": ["A New Hope", "The Empire Strikes Back"] }
   • Arrays
     • Used when data includes multiple records.
     • Example: "results": [ { character1 }, { character2 }, ... ]
   • Nested Objects
     • Represent relationships.
     • Example
       • "homeworld": { "name": "Tatooine", "climate": "arid" }
     • Why Structure Matters
       • Clear data organization supports:
         • Easy retrieval and display.
         • Validation and filtering.
         • API integration and reusability.

3. DATA SPECIFICATION

   • Data Types
     • String: "name": "Leia Organa"
     • Number: "height": 150
     • Boolean: "active": true
     • Array: "films": ["A New Hope", "Return of the Jedi"]
     • Object: "homeworld": { "name": "Alderaan" }
   • Field Requirements
     • Some fields are required (e.g., name, height).
     • Others are optional (e.g., species, starships).
   • Constraints
     • Length limitations (e.g., max 255 characters)
     • Numeric-only values for certain fields (e.g., height).
     • Format rules (e.g., date fields like birth_year follow “BBY” or “ABY”).
   • Data Validation
     • Ensures that
       • Inputs match expected types and constraints.
       • API data adheres to its schema or standard format.
       • User-generated inputs are sanitized to prevent errors.