# 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/>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://checksound.gitbook.io/tecnologie5/xml-e-json-rappresentazione-dei-dati.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.