json & ajax

1 month ago · 97e40d9aa5
3 changed files with 102 additions and 0 deletions
--- a/11_json/index.html
+++ b/11_json/index.html
@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+</head>
+<body>
+    <h1>JS JSON</h1>
+    <p id="demo"></p>
+    <p id="demo_name"></p>
+    <p id="large"></p>
+    <p id="ajaxp"></p>
+
+    <script src="js/app.js"></script>
+</body>
+</html>
--- a/11_json/js/app.js
+++ b/11_json/js/app.js
@ -0,0 +1,70 @@
+//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
--- a/11_json/js/data.json
+++ b/11_json/js/data.json
@ -0,0 +1,15 @@
+[{"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"}]