3 changed files with 226 additions and 0 deletions
@ -0,0 +1,129 @@ |
|||
//JSON Objekt pro zpravování JS
|
|||
const firstJsonObj = { |
|||
//"obyč" hodnoty
|
|||
name:"Peter", |
|||
surname: "Grifin", |
|||
age: 50, |
|||
country: "USA", |
|||
gender: "M", |
|||
//JSON in JSON
|
|||
address: { |
|||
streetName: "Street", |
|||
streetNumb: "32", |
|||
zipCode: "12345" |
|||
}, |
|||
//Array
|
|||
cars: ["audi", "bmw", "skoda"] |
|||
}; |
|||
|
|||
//Stringifikace JSON Objektu na JSON String -> lepší pro komunikaci mezi "prostředí"
|
|||
const firstJson = JSON.stringify(firstJsonObj) |
|||
document.getElementById("demo").innerText = firstJson |
|||
|
|||
// vypsání jednotlivé položky z JSON Objektu
|
|||
document.getElementById("d_name").innerText = firstJsonObj.name |
|||
|
|||
|
|||
//--------------------------------------------
|
|||
|
|||
var largejson = [ |
|||
{ |
|||
"id": 1, |
|||
"first_name": "Denney", |
|||
"age": 25, |
|||
"gender": "Male", |
|||
"fav_color": "Turquoise" |
|||
}, |
|||
{ |
|||
"id": 2, |
|||
"first_name": "Anita", |
|||
"age": 11, |
|||
"gender": "Female", |
|||
"fav_color": "Indigo" |
|||
}, |
|||
{ |
|||
"id": 3, |
|||
"first_name": "Standford", |
|||
"age": 40, |
|||
"gender": "Male", |
|||
"fav_color": "Puce" |
|||
}, |
|||
{ |
|||
"id": 4, |
|||
"first_name": "Daron", |
|||
"age": 55, |
|||
"gender": "Female", |
|||
"fav_color": "Yellow" |
|||
}, |
|||
{ |
|||
"id": 5, |
|||
"first_name": "Justin", |
|||
"age": 34, |
|||
"gender": "Male", |
|||
"fav_color": "Aquamarine" |
|||
}, |
|||
{ |
|||
"id": 6, |
|||
"first_name": "Desiree", |
|||
"age": 20, |
|||
"gender": "Female", |
|||
"fav_color": "Violet" |
|||
}, |
|||
{ |
|||
"id": 7, |
|||
"first_name": "Dietrich", |
|||
"age": 52, |
|||
"gender": "Male", |
|||
"fav_color": "Green" |
|||
}, |
|||
{ |
|||
"id": 8, |
|||
"first_name": "Brynna", |
|||
"age": 15, |
|||
"gender": "Female", |
|||
"fav_color": "Purple" |
|||
}, |
|||
{ |
|||
"id": 9, |
|||
"first_name": "Karlik", |
|||
"age": 37, |
|||
"gender": "Male", |
|||
"fav_color": "Red" |
|||
}, |
|||
{ |
|||
"id": 10, |
|||
"first_name": "Birk", |
|||
"age": 43, |
|||
"gender": "Male", |
|||
"fav_color": "Fuscia" |
|||
} |
|||
]; |
|||
|
|||
let final = ""; |
|||
for (let i = 0; i < largejson.length; i++) { |
|||
const name = largejson[i].first_name; |
|||
const age = largejson[i].age; |
|||
const gender = largejson[i].gender; |
|||
|
|||
if(gender == "Female" ) |
|||
{ |
|||
final += "<p> ID:"+i+"; Pracovnice: <b>" + name + "</b></p>"; |
|||
} else { |
|||
final += "<p> ID:"+i+"; Pracovík: <b>" + name + "</b>; věk: "+age+ "</p>"; |
|||
|
|||
} |
|||
|
|||
document.getElementById("large").innerHTML = final; |
|||
|
|||
} |
|||
|
|||
|
|||
//----------------------------------------
|
|||
//AJAX
|
|||
// let ajaxdata;
|
|||
// fetch('https://jsonplaceholder.typicode.com/users')
|
|||
// .then(response => {return response.json()})
|
|||
// .then(users = console.log(users));
|
|||
|
|||
// console.log(ajaxdata);
|
|||
// document.getElementById("ajaxp").innerHTML = ajaxdata;
|
@ -0,0 +1,72 @@ |
|||
[ |
|||
{ |
|||
"id": 1, |
|||
"first_name": "Denney", |
|||
"age": 25, |
|||
"gender": "Male", |
|||
"fav_color": "Turquoise" |
|||
}, |
|||
{ |
|||
"id": 2, |
|||
"first_name": "Anita", |
|||
"age": 11, |
|||
"gender": "Female", |
|||
"fav_color": "Indigo" |
|||
}, |
|||
{ |
|||
"id": 3, |
|||
"first_name": "Standford", |
|||
"age": 40, |
|||
"gender": "Male", |
|||
"fav_color": "Puce" |
|||
}, |
|||
{ |
|||
"id": 4, |
|||
"first_name": "Daron", |
|||
"age": 55, |
|||
"gender": "Female", |
|||
"fav_color": "Yellow" |
|||
}, |
|||
{ |
|||
"id": 5, |
|||
"first_name": "Justin", |
|||
"age": 34, |
|||
"gender": "Male", |
|||
"fav_color": "Aquamarine" |
|||
}, |
|||
{ |
|||
"id": 6, |
|||
"first_name": "Desiree", |
|||
"age": 20, |
|||
"gender": "Female", |
|||
"fav_color": "Violet" |
|||
}, |
|||
{ |
|||
"id": 7, |
|||
"first_name": "Dietrich", |
|||
"age": 52, |
|||
"gender": "Male", |
|||
"fav_color": "Green" |
|||
}, |
|||
{ |
|||
"id": 8, |
|||
"first_name": "Brynna", |
|||
"age": 15, |
|||
"gender": "Female", |
|||
"fav_color": "Purple" |
|||
}, |
|||
{ |
|||
"id": 9, |
|||
"first_name": "Karlik", |
|||
"age": 37, |
|||
"gender": "Male", |
|||
"fav_color": "Red" |
|||
}, |
|||
{ |
|||
"id": 10, |
|||
"first_name": "Birk", |
|||
"age": 43, |
|||
"gender": "Male", |
|||
"fav_color": "Fuscia" |
|||
} |
|||
] |
@ -0,0 +1,25 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|||
<title>Document</title> |
|||
</head> |
|||
<body> |
|||
<h1>JS JSON</h1> |
|||
|
|||
<p id="demo"></p> |
|||
|
|||
<h2 id="d_name"></h2> |
|||
|
|||
<hr> |
|||
|
|||
<p id="large"></p> |
|||
|
|||
<hr> |
|||
|
|||
<p id="ajaxp"></p> |
|||
<script src="app.js"></script> |
|||
</body> |
|||
</html> |
Loading…
Reference in new issue