3I_WTL_2025/11_json/README.md

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

// 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:

// ❌ Š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