revision:
<header class="head">
</header>
<section class="spec">
</section>
<style>
.head h1, .head h2 {font-family: 'Faster One', cursive;}
/* header styles */
.head h1 {font-size: 3rem; text-align: center;}
.head p {font-size: 1rem; font-weight: bold; text-align: center;}
/* section styles */
section article {width: 33%;float: left;}
section p {margin: 5px 0;}
section ul {margin-top: 0;}
.head h2 {font-size: 2rem; letter-spacing: -5px; margin-bottom: 10px;}
</style>
<script>
async function populate() {
const requestURL = 'superheroes.json';
const request = new Request(requestURL);
const response = await fetch(request);
const superHeroes = await response.json();
populateHeader(superHeroes);
populateHeroes(superHeroes);
}
function populateHeader(obj) {
const header = document.querySelector('header');
const myH1 = document.createElement('h1');
myH1.textContent = obj.squadName;
header.appendChild(myH1);
const myPara = document.createElement('p');
myPara.textContent = `Hometown: ${obj.homeTown} // Formed: ${obj.formed}`;
header.appendChild(myPara);
}
function populateHeroes(obj) {
const section = document.querySelector('section');
const heroes = obj.members;
for (const hero of heroes) {
const myArticle = document.createElement('article');
const myH2 = document.createElement('h2');
const myPara1 = document.createElement('p');
const myPara2 = document.createElement('p');
const myPara3 = document.createElement('p');
const myList = document.createElement('ul');
myH2.textContent = hero.name;
myPara1.textContent = `Secret identity: ${hero.secretIdentity}`;
myPara2.textContent = `Age: ${hero.age}`;
myPara3.textContent = 'Superpowers:';
const superPowers = hero.powers;
for (const power of superPowers) {
const listItem = document.createElement('li');
listItem.textContent = power;
myList.appendChild(listItem);
}
myArticle.appendChild(myH2);
myArticle.appendChild(myPara1);
myArticle.appendChild(myPara2);
myArticle.appendChild(myPara3);
myArticle.appendChild(myList);
section.appendChild(myArticle);
}
}
populate();
</script>
<div>
<div id="vb1"></div>
<div id="vb2"></div>
<div id="vb3"></div>
</div>
<script>
// declare a JSON string
const me = `{ "name": "Thomas", "age": 60, "twitter": "@thomasM" }`
// parse JSON string
const data = JSON.parse(me)
document.getElementById('vb1').innerHTML = "my name is: " + data.name +".";
document.getElementById('vb2').innerHTML = "I am " + data.age +" years old.";
document.getElementById('vb3').innerHTML = "my twitter account is " + data.twitter;
console.log(data.name) // Thomas
console.log(data.age) // 60
console.log(data.twitter) // @thomasM
</script>
<div>
<div id="vb4"></div>
<div id="vb5"></div>
</div>
<script>
const userJSONData = `{"name": "Alex C", "age": 2, "city": "Houston"}`;
const userObj = JSON.parse(userJSONData);
console.log(userObj);
document.getElementById('vb4').innerHTML = "my details are as follows: " + userObj.name + " ," + userObj.age +
" years old" + ", " + "from " + userObj.city;
// Alex C ,2, Houston
const userObj_2 = {name: 'Alex C', age: 2, city: 'Houston'}
const userJSONData_2 = JSON.stringify(userObj_2);
console.log(userJSONData_2);
// {"name":"Alex C","age":2,"city":"Houston"}
document.getElementById('vb5').innerHTML = userJSONData;
</script>
<div>
<div id="vb6"></div>
<div id="vb7"></div>
<div id="vb8"></div>
</div>
<script>
let personnel = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
const obj = JSON.parse(personnel);
document.getElementById("vb6").innerHTML = obj.employees[1].firstName + " , " + obj.employees[1].lastName;
// Anna Smith
document.getElementById("vb7").innerHTML = obj.employees[1].firstName + " , " + obj.employees[2].firstName;
// Anna Peter
document.getElementById("vb8").innerHTML = obj.employees[0].firstName + " , " + obj.employees[1].lastName;
</script>
<div>
<div id="vb9"></div>
<div id="vb10"></div>
<div id="vb11"></div>
</div>
<script>
const library = `{ "eBooks":[
{"language":"Pascal", "edition":"third" },
{"language":"Python", "edition":"four"},
{"language":"SQL", "edition":"second"}
]}`;
const object1 = JSON.parse(library);
document.getElementById('vb9').innerHTML = object1.eBooks[0].language + " , " + object1.eBooks[0].edition;
document.getElementById('vb10').innerHTML = object1.eBooks[1].language + " , " + object1.eBooks[1].edition;
document.getElementById('vb10').innerHTML = object1.eBooks[2].language + " , " + object1.eBooks[2].edition;
</script>
<div>
<div id="vb12"></div>
<div id="vb13"></div>
<div id="vb14"></div>
</div>
<script>
let team = `{"student": [
{"id":"01", "name": "Tom", "lastname": "Price" },
{"id":"02", "name": "Nick", "lastname": "Thameson"}
]
}`;
const object3 = JSON.parse(team);
document.getElementById("vb12").innerHTML = "name" + object3.student[0].name + ", " + "given name: " +
object3.student[0].lastname;
document.getElementById("vb13").innerHTML = "family name: " + object3.student[0].lastname;
document.getElementById("vb14").innerHTML = "my name is " + object3.student[1].name + ", " + "my family name is " +
object3.student[1].lastname;
</script>
<div>
<div id="vb15"></div>
<div id="vb16"></div>
<div id="vb17"></div>
</div>
<script>
const simpleArrayJson = '["Java", "Python", "JavaScript"]';
const objectArrayJson = `{"languages": [{"naam": "Java", "description": "Java is a class-based,
object-oriented programming language."},{"naam": "Python", "description": "Python is an interpreted,
high-level and general-purpose programming language."},{"naam": "JS", "description": "JS is a programming
language that conforms to the ECMAScript specification."}]}`;
const object4 = JSON.parse(simpleArrayJson);
const object5 = JSON.parse(objectArrayJson);
console.log(object4);
document.getElementById("vb15").innerHTML = object4;
console.log(object5);
document.getElementById("vb16").innerHTML = object5.languages[0].naam + ", " + object5.languages[0].description;
document.getElementById("vb17").innerHTML = object5.languages[1].description;
</script>
<div>
<div id="vb_a"></div>
</div>
<script>
const data_2 = {
name: 'Thomas',
age: '60',
twitter: '@thomasM'
}
// convert it to string
const my = JSON.stringify(data)
document.getElementById('vb_a').innerHTML = my;
// {"name":"Thomas","age":"60","twitter":"@thomasM"}
console.log(my)
</script>
<div>
<div id="vb_b"></div>
<div id="vb_c"></div>
<div id="vb_d"></div>
</div>
<script>
var j = {name: "binchen"};
var k = {"naam": "Degreef"}
console.log(JSON.stringify(j));
document.getElementById('vb_b').innerHTML = JSON.stringify(j);
document.getElementById('vb_c').innerHTML = JSON.stringify(j, null, 4);
document.getElementById('vb_d').innerHTML = JSON.stringify(k, null, 4);
</script>
<div>
<div id="vb_e"></div>
<div id="vb_f"></div>
<div id="vb_g"></div>
</div>
<script>
let student = {
name: 'John',
age: 30,
isAdmin: false,
courses: ['html', 'css', 'js'],
spouse: null
};
let json = JSON.stringify(student);
document.getElementById('vb_e').innerHTML = "type of json is: " + typeof json;
document.getElementById('vb_f').innerHTML = "json is: " + json;
</script>
<div>
<div id="vb_h"></div>
<div id="vb_i"></div>
<div id="vb_j"></div>
</div>
<script>
let meetup = {
title: "Conference",
room: {
number: 23,
participants: ["john", "ann"]
}
};
console.log(JSON.stringify(meetup));
document.getElementById("vb_h").textContent = JSON.stringify(meetup);
document.getElementById("vb_i").textContent = "meeting room: " + JSON.stringify(meetup.room.number);
document.getElementById("vb_j").textContent = "participants: " + JSON.stringify(meetup.room.participants);
</script>
<div>
<div id="vb_k"></div>
<div id="vb_l"></div>
<div id="vb_m"></div>
</div>
<script>
let room = {
number: 23
};
let meeting = {
title: "Conference",
participants: [{name: "John"}, {name: "Alice"}],
place: room // meetup references room
};
room.occupiedBy = meeting; // room references meetup
document.getElementById("vb_k").innerText = JSON.stringify(meeting, function replacer (key, value){
document.getElementById("vb_l").innerHTML = `${key};${value}`;
return (key == 'occupiedBy') ? undefined : value;
});
</script>