# 11 - JSON a Práce s Daty

## 🎯 Co se naučíte

V této lekci se naučíte pracovat s JSON formátem a načítat data do JavaScriptu.

## 📚 Témata lekce

- **JSON formát** (JavaScript Object Notation)
- **JSON.parse()** - převod JSON stringu na objekt
- **JSON.stringify()** - převod objektu na JSON string
- **Načítání dat z JSON souborů**
- **Práce s JSON daty** v JavaScriptu
- **Výpis dat na stránku** pomocí DOM manipulace
- **Pole objektů** - procházení cyklem

## 📂 Soubory v projektu

- `index.html` - HTML s elementy pro zobrazení dat
- `js/app.js` - JavaScript pro práce s JSON
- `data/` (možná) - složka s JSON soubory

## 💻 Ukázka z lekce

```javascript
// JSON objekt v JavaScriptu
const osoba = {
    "jmeno": "Jan",
    "prijmeni": "Novák",
    "vek": 20,
    "mesto": "Praha"
};

// Výpis dat
console.log(osoba.jmeno);  // Jan

// JSON string
const jsonString = '{"jmeno":"Jan","vek":20}';

// Převod stringu na objekt
const obj = JSON.parse(jsonString);
console.log(obj.jmeno);  // Jan

// Převod objektu na string
const str = JSON.stringify(osoba);
console.log(str);  // {"jmeno":"Jan",...}

// Pole objektů
const osoby = [
    {"jmeno": "Jan", "vek": 20},
    {"jmeno": "Petra", "vek": 25},
    {"jmeno": "Karel", "vek": 30}
];

// Procházení pole
osoby.forEach(function(osoba) {
    console.log(osoba.jmeno + " má " + osoba.vek + " let");
});

// Výpis na stránku
let html = "";
osoby.forEach(function(osoba) {
    html += "<p>" + osoba.jmeno + "</p>";
});
document.getElementById("demo").innerHTML = html;
```

## 🚀 Jak s lekcí pracovat

1. Otevřete `index.html` v prohlížeči
2. Otevřete **Console** (F12) a sledujte výpis JSON dat
3. Prozkoumejte `js/app.js` - jak se pracuje s JSON
4. Zkuste vytvořit vlastní JSON objekt
5. Vyzkoušejte převody mezi objektem a stringem
6. Vytvořte pole objektů a vypište je na stránku

## 💡 Tip pro studenty

### JSON syntaxe:
- **Klíče musí být v uvozovkách**: `{"jmeno": "Jan"}` ✅
- **Hodnoty**: string (v uvozovkách), číslo, boolean, null, objekt, pole
- **Čárka** mezi položkami, ale ne za poslední
- **Žádné komentáře** v JSON!

### Běžné chyby:
```javascript
// ❌ ŠPATNĚ - klíče bez uvozovek
{jmeno: "Jan"}

// ✅ SPRÁVNĚ
{"jmeno": "Jan"}

// ❌ ŠPATNĚ - čárka za posledním
{"jmeno": "Jan", "vek": 20,}

// ✅ SPRÁVNĚ
{"jmeno": "Jan", "vek": 20}
```

### JSON vs JavaScript objekt:
- **JSON** = textový formát (string), univerzální
- **JS objekt** = datová struktura v paměti
- **JSON.parse()** = převod z textu na objekt
- **JSON.stringify()** = převod z objektu na text

### Praktické použití:
- 💾 Ukládání dat do localStorage
- 🌐 Komunikace s API (fetch)
- 📤 Odesílání dat na server
- 📥 Načítání konfigurace

## 🔗 Související lekce

- **Předchozí:** 10_flex - Flexbox layout
- **Další:** 12_grid - CSS Grid
- **Pokročilé:** 20_ajax - AJAX a Fetch API (načítání JSON ze serveru)
- **Praktické:** Práce s API a reálnými JSON daty