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)