COMP1204:

Structured Data
YAML, JSON, and Yet More Markup

Tom Blount
[email protected]
Last lecture
• Unstructured data
• CSV and TSV
• Markup Concepts
• Why do we want machine-readable data?
This lecture
• More machine-readable data!
• YAML
• JSON
• More markup!
• HTML
• ink
• And soon, XML!
YAML
• Originally “Yet Another Markup Language”…
• ..but now “YAML Ain’t Markup Language”
• Widely used in config files

• Technically a superset of JSON

https://yaml.org/
YAML
• Relies on whitespace for structure, rather than
tags
• Easier to read! (Yay?)
• Harder to write! (Boo!)
• Key-value pairs

https://yaml.org/
YAML Example (YAxmple?)

name: Tom
YAML Example (YAxmple?)

person:
name: Tom
role: Teaching
YAML Example (YAxmple?)

person:
name: Tom
role: Teaching
favourite numbers:
- 42
- 13
- 3.141
YAML Example (YAxmple?)
people:
- person:
name: Tom
role: Teaching
favourite numbers:
- 42
- 13
- 3.141
- person:
name: Oli
role: Teaching
favourite food: pizza
YAML
• When/why would I use it? Why wouldn’t I use it?

• Config files
• Passing messages between applications
• Saving (simple) application state

• Spec is someone ambiguous – not all parsers will give the same
result!
• Not as widely used as some other data serialisation formats
 ---
- name: Tatooine
rotation_period: 23
YAML Exercise orbital_period: 304
diameter: 10465
climate: “arid”
gravity: 1 standard
terrain: desert
• Here’s some YAML: surface_water: 1
population: 200000
1. Which planet has the - name: Alderaan
rotation_period: 24
largest population? orbital_period: 364
diameter: 12500
climate: “temperate”
2. What’s the most gravity: 1 standard
common climate? terrain: grasslands, mountains
surface_water: 40
population: 2000000000
3. Why isn’t this valid - name: Yavin IV
YAML? rotation_period: 24
orbital_period: 4818
diameter: 10200
climate: “temperate, tropical”
gravity: 1 standard
terrain: jungle, rainforests
surface_water: 8
population: 1000
 ---
- planet:
name: Tatooine
rotation_period: 23
YAML Exercise orbital_period: 304
diameter: 10465
climate: “arid”
gravity: 1 standard
terrain: desert
surface_water: 1
• Parent can’t have a value population: 200000
- planet:
and children name: Alderaan
rotation_period: 24
orbital_period: 364
• And… diameter: 12500
climate: “temperate”
• …I used tabs, not spaces! gravity: 1 standard
terrain: grasslands, mountains
surface_water: 40
population: 2000000000
- planet:
name: Yavin IV
rotation_period: 24
orbital_period: 4818
diameter: 10200
climate: “temperate, tropical”
gravity: 1 standard
terrain: jungle, rainforests
surface_water: 8
population: 1000
JSON
• JavaScript Object Notation
• 3 important concepts
• Objects
• Lists
• Values
• Objects, but no classes!

https://www.json.org/
JSON

https://www.json.org/
JSON Example

{
"name": "Tom"
}
JSON Example

{
"person": {
"name": "Tom",
"role": "Teaching",
"lucky": [42, 13, 3.141]
}
}
JSON Example
{
"people":[
{
"name": "Tom",
"role": "Teaching",
"lucky": [42, 13, 3.141]
},
{
"name": "Oli",
"role": "Teaching",
"favourite food": "Pizza"
},
]
}
JSON Example
{
"people":[
{
"name": "Tom",
"role": "Teaching",
"lucky": [42, 13, 3.141]
},
{
"name": "Oli",
"role": "Teaching",
"favourite food": "Pizza"
},
]
}
JSON
• How to use it?
• Java
• Python
• Javascript
• Plenty of languages!
JSON - Java

JSONObject myJson = new JSONObject("{\"person\": {\"name\": \"Tom\",

\"role\": \"Teaching\"}}");

String name = myJson.getJSONObject("person").getString("name");

 JSON - Python

import json

myJSON = json.loads('{ "person": { "name":"Tom", "role":"Teaching"} }')

name = myJSON["person"]["name"]
JSON - JS

const myJSON = JSON.parse('{ "person": { "name":"Tom",

"role":"Teaching"} }');

name = myJSON["person"]["name"];
JSON
• When/why would I use it?
• Pretty much whenever you’re passing data across the web
• (e.g. API calls)
• Passing data between programs/languages

• Config data - sometimes

JSON Exercise
• https://swapi.dev/api/starships/?format=json

1. Print the name of the first 10 ships

2. What’s the name of the most expensive ship?
3. What’s the average cost of ships built by Corellian Engineering
Corporation?
4. How many films has the Millennium Falcon appeared in?
JSON Exercise
• https://swapi.dev/api/starships/?format=json

const swapiText = ‘{ "count": 36, "next": ... }’;

const swapi = JSON.parse(swapiText);
const ships = swapi["results"];
JSON Exercise
• https://swapi.dev/api/starships/?format=json

1. Print the name of the first 10 ships

const swapiText = `{ "count": 36, "next": ... }`;

const swapi = JSON.parse(swapiText);
const ships = swapi["results"];

for (let ship of ships) {

console.log(ship["name"]);
}
JSON Exercise
• https://swapi.dev/api/starships/?format=json

2. What’s the name of the most expensive ship?

var expensiveShipName
var swapiText = `{
"";"count": 36, "next": ... }`;
var expensiveShipCost
var swapi = JSON.parse(swapiText);
= -1;
for (letvar
ship
ships
of ships)
= swapi["results"];
{
if(Number(ship["cost_in_credits"]) > expensiveShipCost){
expensiveShipCost = ship["cost_in_credits"];
expensiveShipName = ship["name"];
}
}
console.log(expensiveShipName);

Death Star
JSON Exercise
• https://swapi.dev/api/starships/?format=json

3. What’s the average cost of ships built by Corellian Engineering

Corporation?
var totalShipCost = 0;
for totalShipCount
var (let ship of ships)
= 0; {
for (let
if(ship[“manufacturer"]
ship of ships) ={ `{ "count":
var swapiText === "Corellian Engineering
36, "next": ... }`; Corporation"){
if(ship[“manufacturer"]
var totalShipCost += ===
Number(ship["cost_in_credits"]);
"Corellian Engineering Corporation“
swapi = JSON.parse(swapiText);
} var && !isNaN(Number(ship["cost_in_credits"]))){
ships = swapi["results"];
} totalShipCost += Number(ship["cost_in_credits"]);
console.log(totalShipCost
totalShipCount / ships.length);
+= 1;
}
}
console.log(totalShipCost / totalShipCount);

1800000
JSON Exercise
• https://swapi.dev/api/starships/?format=json

4. How many films has the Millennium Falcon appeared in?

var swapiText = `{ "count": 36, "next": ... }`;
var swapi = JSON.parse(swapiText);
var ships = swapi["results"];

for (let ship of ships) {

if(ship["name"] === "Millennium Falcon"){
console.log(ship["films"].length);
break;
}
}
3
Markup Languages
• What’s the purpose of markup?
• Adds additional information on top of the content without changing
the content
• Allows us to style/structure the content
• Allows machines to parse the content
Markup Languages

Title Quote
Story Paragraph

Moral This information sits “on top” of the text itself

Markup Languages
Markup Languages
• Some that you’ll be familiar with:
• TeX
• HTML
HTML
• Markup for Hypertext documents – (“documents with links in them”)
• Structure
• <body>, <h1>
• Presentation
• <b>, <i>
• Semantics
• <strong>, <em>

• Is there a difference between this and this?

HTML Exercise
• How would you markup the following TeX as HTML?
\documentclass{article}
\begin{document}

\section{My Document}
Welcome to my document!

In this document is a picture of a \textbf{frog}...

\subsection{And now: a Figure}

\begin{figure}
\includegraphics{frog.jpg}
\caption{Ta-dah! A picture of a frog}
\end{figure}

\end{document}
HTML Exercise
• What’s changed?
<!DOCTYPE html>
<html>
<body>
<section>
<h1>My Document</h1>
<p>Welcome to my document!</p>
<p>In this document is a picture of a <strong>frog</strong>...</p>
<section>
<h2>And now: a Figure</h2>
<figure>
<img src="frog.jpg">
<figcaption>Ta-dah! A picture of a frog</figcaption>
</figure>
</section>
</section>
</body>
</html>
 HTML & YAML?
• Jekyll – static site generator
• Liquid – templating system

---
food: pizza
salutation:
--- Hi
--- food: bread
salutation: Hello!
<!DOCTYPE
--- ---
html>
<html> food: fish & chips
<body> salutation:
<!DOCTYPE html> Howdy
<h1>{{---
<html> page.food }}</h1>
<p>{{ page.salutation }}! This page is all about {{ page.food }} and...</p>
<body>
<!DOCTYPE
... <h1>{{ html> }}</h1>
page.food
<html>
<p>{{ page.salutation }}! This page is all about {{ page.food }} and...</p>
... <body>
<h1>{{ page.food }}</h1>
<p>{{ page.salutation }}! This page is all about {{ page.food }} and...</p>
...
ink
• Markup for web-based interactive fiction
• Effectively, a different markup language for
hypertext
• Integrates with different game engines
(including Unity)
• “Knots”
• “Diverts”
• “Choices”
ink
Ink – “Knots”
• Labels/sections
• All content beneath the knot belongs to that knot
• (Until the next knot)

=== london ===

It was a dark and stormy night in old London
town, when...
Ink – “Diverts”
• Links/“GOTO”s
• Takes the reader to the matching knot
• E.g.:
• -> london
Ink - “Choices”
• …Choices
• The choice itself, and any text below it, becomes part of the rendered
story

"I intend to travel around the world!"

+ "Around the world, Monsieur?"

+ "Not today, I think."
ink – all together now
ink exercise
• Head to https://www.inklewriter.com/
• Write me a story!
• Include a knot, a divert, and at least one choice
• (Don’t worry, I’m not going to be judging your writing!)
• If you need some inspiration, project Gutenberg has an enormous list
of Aesop’s Fables:
• https://www.gutenberg.org/files/21/21-h/21-h.htm#linkaesop
ink exercise
• ….and look, we can even export it as JSON!

{"title":“My
Story","data":{"stitches":{"onceUponATime":{"content":["Once upon a
time...",{"option":"","linkPath":null,"ifConditions":null,"notIfConditi
ons":null},{"pageNum":1}]}},"initial":"onceUponATime","optionMirroring"
:true,"allowCheckpoints":false,"editorData":{"playPoint":"onceUponATime
","libraryVisible":false,"authorName":“Tom","textSize":0}},"url_key":15
0784}
Summary
• Some more types of structured data, that add a little more structure
• Some more types of markup too!
Next Time
• XML!
• Tuesday Lab session
• No lecture on Friday or Monday!