3 changed files with 102 additions and 0 deletions
@ -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> |
||||
@ -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
|
||||
@ -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"}] |
||||
Loading…
Reference in new issue