JSON

name: portada
layout: true
class: portada-slide, middle, right
---
# JSON
## Markup languages

.footnote[Joan Puigcerver Ibáñez ([j.puigcerveribanez@edu.gva.es](mailto:j.puigcerveribanez@edu.gva.es))]

---
layout: true
class: regular-slide
.right[.logo[![logoMislata](/itb/images/logo_mislata.png)]]

---
# JSON
.blue[JSON] (JavaScript Object Notation) is a plain text based file format used to
represent .blue[structured data] in a human-readable way. Objects are stored using
a .blue[attribute-value pairs and arrays]. It's usually used to transmit data in web applications.

Nowadays is more popular than XML.

---
# Values

- Text (between quotation marks)

```text
"Pere Martí"
```

- Numbers (integer or float)

```text
29.24
```

- Boolean

```text
true or false
```

- null value

```text
null
```

---
# Objects
Objects are enclosed between .blue[{ }]. It consists in multiple 
attribute-value pairs separated by commas.

* Syntax:

```
{
  "attribute1": value1,
  "attribute2": value2,
  ...
}
```
* Example

```
{
  "name": "Pere Martí",
  "age": 29,
  "is_adult": true
}
```

---
# Arrays
Arrays are a list of values separated by commas and enclosed between .blue[[ ]].
It can contain values or objects.

* Syntax:

```
[valor1, valor2, valor3]
```

* Exemple:

```
{
  "tshirt": {
    "size": "L",
    "colors": ["black", "red", "white"]
  }
}
```

---
# Format
- White spaces and new lines are not relevant.
- It has to contain a root element. Its type can be anything.
- The following JSON are equivalent:

```
{
  "name": "Pere Martí",
  "address": {
    "road": "Av Diagonal",
    "number": 23,
    "city": "Barcelona"
  }
}
```

```
{ "name": "Pere Martí", "address": { "road": "Av Diagonal", "number": 23, "city": "Barcelona" } }
```

---
# More examples
Object inside an object

```
{
  "name": "Pere Martí",
  "address": {
    "road": "Av Cardenal Benlloch",
    "number": 23,
    "city": "València",
    "postal_code": "46021"
  },
  "DNI": "12345678Z",
  "age": "29"
}
```

---
# Exemples
Object array

```
[
  {"name": "Pere Martí", "age": 25},
  {"name": "Alba Puig", "age": 66}
]
```

---
# Exemples

```
{
  "students":[
    {"name": "Pere Martí", "age": 25},
    {"name": "Alba Puig", "age": 66}
  ],
  "teachers":[
    {"name": "Carla Martí", "age": 39},
    {"name": "Ona Roca", "age": 21}
  ]
}
```

---
class: background-dark

# Exercise 1
Write a JSON that stores the following information (a different JSON for each item)
1. A student named Joan Garcia from València and his birth date is 24th of February.
2. A list of the following restaurants:
  - Bar Pasqual is a tapes bar in Av. Blsco Ibáñez, 232, València. Its owner is Marc Alcover.
  - Restaurant Meravelles is a menu restaurant located in Av. Regne de València, 111, València,
    owned by Maria Pasqual. 
  - Racó de l'Avia is a menu restaurant in Av Roma, 221, Barcelona owned by Alba Puig.
3. A list of art from a museum:
  - "Der Kuss" its a painting from Gustav Klimt painted in 1907.
  - "Gernica" its a mural from Pablo Picasso painted in 1937.
  - "David" its a marble sculpture from Michelangelo created in 1504.

---
class: background-dark
# Exercise 2
Write a JSON document with the same information and structure than the following XML document.

```xml
<widget>
    <debug>on</debug>
    <window title="Sample Konfabulator Widget">
        <name>main_window</name>
        <width>500</width>
        <height>500</height>
    </window>
    <image src="Images/Sun.png" name="sun1">
        <hOffset>250</hOffset>
        <vOffset>250</vOffset>
        <alignment>center</alignment>
    </image>
    <text data="Click Here" size="36" style="bold">
        <name>text1</name>
        <hOffset>250</hOffset>
        <vOffset>100</vOffset>
        <alignment>center</alignment>
        <onMouseUp>
            sun1.opacity = (sun1.opacity / 100) * 90;
        </onMouseUp>
    </text>
</widget>
 ```

---
class: background-dark
# Exercise 3

The following JSON provides information about the bicycle service in Barcelona:
http://wservice.viabicing.cat/v2/stations

Write:
- The street name of the station with id 33.
- How many bycicles are available in the station in Girona, 68 in this moment?

Append a screenshot of the JSON fragment where you found this information.

---
class: background-dark
# Exercise 4
- Write a JSON that stores the information about cooking recipes.
  - Store 2 recipes at least
  - The JSON document must have at least 4 levels.