//JSON objekt pro zpracování v JS
const firstJsonObj = {
    //"obyč" hodnoty
    name:"Peter",
    surname:"Parker",
    age:20,
    country:"USA",
    gender:"M",
    //JSON in JSON
    address:{
        streetName:"Street",
        streetNumb: "32",
        zipCode: "12345"
    },
    //array
    cars: ["audi","bmw","ferrari","skoda"]
};

//Stringifikace JSON Objektu na JSON String -> lepší pro komunikaci mez "prostředi"
const firstJson = JSON.stringify(firstJsonObj)
document.getElementById("demo").innerText = firstJson
//vypsat jednotlivou položkku
document.getElementById("demo_name").innerText = firstJsonObj.name

var largejson = [{"id":1,"name":"Allan","age":44,"gender":"Male","fav_color":"Yellow"},
{"id":2,"name":"Ortensia","age":18,"gender":"Female","fav_color":"Khaki"},
{"id":3,"name":"Natalina","age":23,"gender":"Female","fav_color":"Fuscia"},
{"id":4,"name":"Karine","age":20,"gender":"Female","fav_color":"Orange"},
{"id":5,"name":"Gennifer","age":42,"gender":"Polygender","fav_color":"Yellow"},
{"id":6,"name":"Meg","age":30,"gender":"Female","fav_color":"Blue"},
{"id":7,"name":"Marne","age":18,"gender":"Female","fav_color":"Goldenrod"},
{"id":8,"name":"Mariam","age":47,"gender":"Female","fav_color":"Pink"},
{"id":9,"name":"Reynolds","age":28,"gender":"Male","fav_color":"Turquoise"},
{"id":10,"name":"Hedvig","age":45,"gender":"Female","fav_color":"Indigo"},
{"id":11,"name":"Cybil","age":48,"gender":"Genderfluid","fav_color":"Orange"},
{"id":12,"name":"Augustine","age":24,"gender":"Male","fav_color":"Green"},
{"id":13,"name":"Carolina","age":42,"gender":"Female","fav_color":"Orange"},
{"id":14,"name":"Corella","age":45,"gender":"Female","fav_color":"Goldenrod"},
{"id":15,"name":"Sloan","age":33,"gender":"Male","fav_color":"Crimson"}];

let final = "";
for (let i = 0; i < largejson.length; i++) {
    const name = largejson[i].name;
    const age = largejson[i].age;
    const gender = largejson[i].gender;

    if (gender == "Female") {
        final += "<p> ID:"+i+"; Pracovnice: <b>"+name+"</b></p>";
    }else if (gender == "Male") {
        final += "<p> ID:"+i+"; Pracovník: <b>"+name+"</b>;Věk: "+age+"</p>";
    }else {
        final += `<p>ID:${i}; Jméno: <b><i>${name}</i></b>; gender: ${gender}` //AltGr+ý=`
    }
    document.getElementById("large").innerHTML = final
}

//AJAX
let ajaxdata;
fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => {return response.json()})
    .then(users => {
        ajaxdata = users; 
        console.log("Loaded:",users);
        ajaxdataString = JSON.stringify(ajaxdata)
        document.getElementById("ajaxp").innerHTML = ajaxdataString
    })

//toto se pustí moc brzy než Fetch získá data
//console.log("AjaxData:",ajaxdata)
//document.getElementById("ajaxp").innerHTML = ajaxdata