HTML tables
can be used to
display data
for the user.
Because each JSON data is stored in
an object, these can be used as
headings for HTML tables when
displaying/outputting information to
the user.
Sample
Data
JSON
(W3Schools,
n.d.)
Uses "{ }" to define objects (W3Schools, n.d.)
Uses "[ ]" to define arrays (W3Schools, n.d.)
XML (W3Schools,
n.d.)
Uses opening and closing tags
(< > and </ >) (W3Schools, n.d.)
User determines tag names (not pre-defined)
(e.g. "<note>" and "</note>") (W3Schools, n.d.)
HTML
HTML used to
display selected
data from the API,
and structure the
web page
Creates text: uses tags like <h1>
and <p> to display the API
responses as text for users to
read.
Creates menu bar: uses
tags like <div> to
separate parts of the
webpage into different
parts, like a header at
the top of the page.
CSS
Used to style the
different HTML
elements to make the
web app engaging and
interesting for the
users and user persona
Can change colours:
use "color"
property to specify
a predefine CSS
colour, or use a
HEX code.
e.g. HEX Code:
"#4b1394"
Data Structures - how JSON
is structured from API
Keys
"A string that
identifies a 'key-value
pair'". (Opentext, n.d.).
Key-value pair: made
of two elements ("a
constant that defines
the data set" and a
value). (Adobe -
Experience League,
2021).
e.g. "name": "Alex Terry"
Values
Data that can be manipulated
or displayed, with a specific
data type. (Launch Code
Education, n.d.).
JSON Value Types (W3Schools, n.d.).
String (e.g. "Hello, world!")
Number/integer (e.g. "4" or "25")
Arrays
JSON Structure that can hold "zero, one, or more ordered elements".
These are separated by a comma (,) and stored in square brackets
([]). (Opentext, n.d.).
e.g. ["Hello", 2, 8, "Purple"]
Data Specifications - different data used in JSON
Data Types
Boolean - only two
options, used as a
basis to determine
if a condition is
met or not.
i.e. "true" or "false"
Null - defines a
cell/element
that is empty
i.e. "null"
Text/varchar/string - any words or
characters or general text
e.g. "This is some text."
Integer -
numbers or
digits
e.g. "2", "64", "123"
Data Length
Defines the number of
characters in a data
value
E.g. 255 characters for Dad jokes (text/varchar/string)
E.g. 4 characters for small ID codes (integer/number)
E.g. 10 characters for phone numbers (integer/number)
Constraints/validation
Constraint: defines
any "individual
requirements"
applying to specific
elements in JSON
(Dennis, 2023).
NOT NULL
AUTO
INCREMENT
UNIQUE
NULL
Validation: checks for "proper
syntax and structure",
"identifies syntax errors" and
can confirm if JSON meets the
structural requirements (Janghu
& Luthra, n.d.).
Privacy - usernames, passwords and emails must be the designated data type when the user inputs
them (e.g. strings with a certain data length), otherwise the database cannot accept them as values.
E.g. Strings must be wrapped in
double quotes (" ") not single quotes
(' ') (Janghu & Luthra, n.d.).
E.g. Arrays must be "denoted" by square
brackets ([]) (Janghu & Luthra, n.d.).
Digital Methods of
Exchanging Data - ways of
exchanging data
Protocols (examples)
Transmission
Control
Protocol
(TCP)
A standard
that exchanges
data through
smaller
packets, and
checks that
they are
successfully
delivered
(Fortinet, n.d.).
Internet
Protocol
(IP)
Sending
packets that
have rules/
instructions
attached to
them, so that
they arrive
correctly and
efficiently
(Cloudflare ,
n.d.).
Hypertext
Transfer
Protocol
(HTTP)
A protocol
that
exchanges
information
of the
internet/the
web
(Mozilla
Developer,
n.d.).
File
Transfer
Protocol
(FTP)
Protocol for
transferring
files over a
network, by
establishing
connections
across
computers
(Fortinet, n.d.).
REST Principles
A guideline with
conditions for API,
and manages
complex network
communication
(Amazon Web
Services, n.d.).
Uniform Interface: a "standard
format" so that there is enough
information transferred for resource
modification and processing
(Amazon Web Services, 2024).
Client-server: a server to client
relationship where requests are sent
and responses are retrieved over a
connection, normally on the internet
(TechTarget Contributor, 2023).
Stateless: the fact that requests from
the client are independent (can be in
any order), and that the server is able
to understand them, successfully
(Amazon Web Services, 2024).
Cacheable: responses can be saved with the
client, saving time spent retrieving
information, and the amount of requests
sent to the server (Amazon Web Services,
2024) (Mindsize Team, 2023).
Layered System: information is interconnected between
multiple servers and server layers (Amazon Web Services, 2024).
JSON + XML
JSON: "JavaScript Object Notation" - stores and
exchanges data in an easy-to-read manner for humans
and computers. It is usable across different
languages/platforms (W3Schools, n.d.) (Erickson, 2024).
Positive: Takes up little storage (Pinkiewicz, 2022)
Positive: similar looking to "JavaScript object creation
code" - easy conversion (W3Schools, n.d.)
Negative: "No JSON calls error
handling" (Rajeev, 2024)
Negative: can be hacked easily (Rajeev, 2024)
XML: "eXtensible Markup Language" - used to
store/transport data. Tags are not predefined and
can be made up, and requires software to exchange
and display it (W3Schools, n.d.).
Example syntax: uses "{ }" to define
object and "[ ]" to create arrays
(W3Schools, n.d.)
Example syntax: uses "< >" to define opening tags
and "</ >" to define closing tags (W3Schools, n.d.)
Negative: creates large files (Murrell, n.d.).
Negative: Requires complex software for interpretation (Murrell, n.d.)
Positive: approved and recommended by W3C (W3Schools, n.d.)
Positive: Compatible with any platform, including Java (IBM, 2023)
Extra data
exchange/storing
methods
SOAP
An XML-based
protocol that
transfers data
by any method,
so long as it is
the same for
the client and
server, using
HTTP (opentext,
n.d.).
Messaging
The ability
for an
application
to receive
and send
messages
on this
interface
(PCMag,
n.d.).
GraphQL
A language
that provides
more
responses in
requests from
APIs
(GraphQL,
n.d.).
SQL
SQL is it's
own
sub-level
of an API,
which
stores
data, but
locally
(Pauncz,
2021).
Python
Python can
communicate
with APIs (API
calls) to
retrieve
information
and data for
analysis
(Ozanich,
2022).