Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind JSON HTML?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___ dbParam = JSON.stringify({table:"customers",limit:20});3Order
Put the learning moves in the order that makes the concept easiest to apply.
JSON can very easily be translated into JavaScript.
HTML Drop Down List
Dynamic HTML Table
Json Html
JSON can very easily be translated into JavaScript.
JavaScript can be used to make HTML in your web pages.
HTML Table
Make an HTML table with data received as JSON:
Example
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
myObj = JSON.parse(this.responseText);
let text = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>"
document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);Dynamic HTML Table
Make the HTML table based on the value of a drop down menu: Choose an option: Customers Products Suppliers
Example
<select id="myselect" onchange="change_myselect(this.value)"> <option value="">Choose an option:</option> <option
value="customers">Customers</option> <option
value="products">Products</option> <option
value="suppliers">Suppliers</option> </select> <script> function change_myselect(sel) {
const dbParam = JSON.stringify({table:sel,limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<table border='1'>"
for (let x in myObj) {
text += "<tr><td>" + myObj[x].name + "</td></tr>";
}
text += "</table>"
document.getElementById("demo").innerHTML = text;
}
xmlhttp.open("POST", "json_demo_html_table.php");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>HTML Drop Down List
Make an HTML drop down list with data received as JSON:
Example
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
const myObj = JSON.parse(this.responseText);
let text = "<select>"
for (let x in myObj) {
text += "<option>" + myObj[x].name + "</option>";
}
text += "</select>"
document.getElementById("demo").innerHTML = text;
}
}
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);