> For the complete documentation index, see [llms.txt](https://checksound.gitbook.io/tecnologie5/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://checksound.gitbook.io/tecnologie5/xml-e-json-rappresentazione-dei-dati.md).

# Xml e JSON - rappresentazione dei dati

{% embed url="<https://it.wikipedia.org/wiki/XML>" %}

{% embed url="<https://it.wikipedia.org/wiki/JavaScript_Object_Notation>" %}

### Esempio

Una rubrica in formato **Xml** che contenga il dato del nome numero di telefono fisso, mobile ed email. Ad esempio potrebbe essere, nel caso avessimo solo due contatti:

```xml
<address_book>
    <contact id="1">
        <name>Roberto Rossi</name>
        <phome>0331 345678</phone>
        <mobile>348 978654</mobile>
        <email>roby@gmail.com</email>
    </contact>
    <contact id="2">
        <name>Vittoria Rossi</name>
        <phome>0331 345688</phone>
        <mobile>348 978664</mobile>
        <email>vicky@gmail.com</email>
    </contact>
</address_book>
```

Abbiamo definito un root element `address_book` che contiene una lista di `contact` ognuna dei quali ha come sottoelementi `name`, `phone`, `mobile` e `email`.&#x20;

L'elemento `contact` ha inoltre un attributo `id`.

Se invece la medesima rubrica la volessimo rappresentare con un documento **JSON**, potrebbe essere:

```json
[
    {
        "id": 1,
        "name": "Roberto Rossi",
        "phone": "0331 345678",
        "mobile": "348 978654",
        "email": "roby@gmail.com"
    },
    {
        "id": 2,
        "name": "Vittoria Rossi",
        "phone": "0331 345688",
        "mobile": "348 978664",
        "email": "vicky@gmail.com"
    }
]
```

Si può vedere come il formato JSON sia, in genere, meno prolisso del formato XML.&#x20;

In notazione JSON per esprimere array/liste di elementi si utilizzano le parentesi  quadre `[]`e virgola `,` per separare gli elementi.

Es:

```json
[1, 2, 3, 4]
```

```json
["Sole", "Luna", "Marte"]
```

```json
[{ "x": 1, "y": 3.5 }, { "x": 1.7, "y": 4.8}]
```

Mentre gli oggetti sono rappresentati con parentesi graffe `{}`come visto nell'ultimo tipo di array (array di oggetti).

Ad esempio l'oggetto che rappresenta un singolo contatto dell'address book:

<pre class="language-json"><code class="lang-json">{
<strong>       "id": 1,
</strong>        "name": "Roberto Rossi",
        "phone": "0331 345678",
        "mobile": "348 978654",
        "email": "roby@gmail.com"
}
</code></pre>

&#x20;Inoltre in *Javascript* è molto semplice convertire un oggetto *Javascript* in documento *JSON* per inviarlo lungo la rete e dall'altra parte riconvertire la stringa *JSON* in oggetto *Javascript*.

La conversione da oggetto *Javascript* a stringa è fatta con il metodo `JSON.stringify(obj)`.&#x20;

Ad esempio:

```javascript
const c1 = {
  name: "massimo",
  phone_number: "2345678"
}

const c2 = {
  name: "giovanni",
  phone_number: "8688989"
}

const contatti = [c1, c2];

var contattiString = JSON.stringify(contatti);

console.log(contattiString);

```

e abbiamo come output la stringa:

```
[{"name":"massimo","phone_number":"2345678"},{"name":"giovanni","phone_number":"8688989"}]
```

Partendo invece dalla stringa, in formato JSON, possiamo riottenere l'oggetto *Javascript* con il metodo `JSON.parse(string)` che ritorna un oggetto.&#x20;

Ad esempio:

```javascript
const jsonMsg = '[{"name":"massimo","phone_number":"2345678"},{"name":"giovanni","phone_number":"8688989"}]';

const objContatti = JSON.parse(jsonMsg);

// ciclo sui contatti e stampo per ognuno nome e numero
objContatti.forEach( e => {
    console.log(`nome: ${e.name}, numero: ${e.phone_number}`);
});
```

Ho l'output:

```
nome: massimo, numero: 2345678
nome: giovanni, numero: 8688989
```

{% embed url="<https://www.youtube.com/watch?v=iiADhChRriM>" %}

### Riferimenti

{% embed url="<https://it.wikipedia.org/wiki/XML>" %}
Formato XML
{% endembed %}

{% embed url="<https://it.wikipedia.org/wiki/JavaScript_Object_Notation>" %}
Formato JSON
{% endembed %}

{% embed url="<https://www.json.org/json-en.html>" %}

Esempi di utilizzo di *JSON* con *Javascript*:

{% embed url="<https://javascript.info/json>" %}

### Tutorial

{% embed url="<https://www.w3schools.com/js/js_json_intro.asp>" %}

### Extra

{% embed url="<https://jsonata.org/>" %}