var myObj, i, j, x = "";
myObj = {
"name":"John",
"age":30,
"cars": [
{"name":"Ford", "models":["Fiesta", "Focus", "Mustang"]},
{"name":"BMW", "models":["320", "X3", "X5"]},
{"name":"Fiat", "models":["500", "Panda"] }
]
}
To access nested JSON arraysfor (i in myObj.cars) {
x += "<h1>" + myObj.cars[i].name + "</h1>";
for (j in myObj.cars[i].models) {
x += myObj.cars[i].models[j];
}
}
callback function
name is the same as the callback
variable passed to the URL
https://api.github.com/users/yui?callback=handleJSONP_variable
The content returned from the request:handleJSONP_variable({"meta": {
"Content-Type": "application/javascript; charset=utf-8",
"Cache-Control": "public, max-age=60, s-maxage=60",
"Vary": "Accept",
"status": 200,
...
}, "data": {
"login": "yui",
"name": "YUI Library",
"company": null,
"blog": "http://yuilibrary.com/",
"location": "Sunnyvale, CA",
"email": null,
"public_repos": 31,
...
}})
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var myObj = JSON.parse(this.responseText);
document.getElementById("demo").innerHTML = myObj.name;
}
};
xmlhttp.open("GET", "demo_file.php", true);
xmlhttp.send();
PHP code that responds to the request$myArr = array("name"=>"John", "age"=>30, "city"=>"New York");
$myJSON = json_encode($myArr);
echo $myJSON;
<script>
element and fills with the JSON
retrieved from a server<script>
var obj, dbParam, xmlhttp, myObj, x, txt = "";
obj = { table: "customers", limit: 20 };
dbParam = JSON.stringify(obj);
xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
myObj = JSON.parse(this.responseText);
txt += "<select>"
for (x in myObj) {
txt += "<option>" + myObj[x].name;
}
txt += "</select>"
document.write(txt);
}
};
xmlhttp.open("POST", "json_demo_html_table.php", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
</script>
<select>
element using document.createElement
method and fills with JSON arrayoptionArray = [
"daily",
"weekly",
"biweekly",
"monthly"
];
// Creates <select> element
let selector = document.createElement('select');
for(let option in optionArray) {
let value = optionArray[option];
// Creates <option> element for <select>
let newOption = document.createElement("option");
newOption.value = value;
newOption.innerHTML = value;
selector.options.add(newOption);
}
// Adds the <select> element into the document object
document.body.appendChild(selector);
the root
An XML tree
starts at a root element
and branches from the root to child elements
<root>
<child>
<subchild>.....</subchild>
</child>
</root>
The terms parent
, child
, and sibling
are used to describe the relationships between elements.
...
Parents
have children.
Children
have parents.
Siblings
are children on the same level (brothers and sisters).
...
We can use any of the online XML tree viewer tools to see the document's tree structure, like this one:https://www.xmlviewer.org/
Books
XML document to see on tree-viewer<books>
<book category="cooking">
<title lang="en">The goals</title>
<author>Giada De Laurentiis</author>
<year>2007</year>
<price>30.00</price>
</book>
<book category="children">
<title lang="en">12 rules for life</title>
<author>J K. Rowling</author>
<year>2002</year>
<price>29.99</price>
</book>
<book category="web">
<title lang="en">The richest man in Babilon</title>
<author>Erik T. Ray</author>
<year>2001</year>
<price>39.95</price>
</book>
</books>
address.xml
into an XML DOM object.
Then extracts contact
information using JavaScript
<!DOCTYPE html>
<html>
<body>
<h1>TutorialsPoint DOM example </h1>
<div>
<b>Name:</b> <span id = "name"></span><br>
<b>Company:</b> <span id = "company"></span><br>
<b>Phone:</b> <span id = "phone"></span>
</div>
<script>
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
// else
// {// code for IE6, IE5
// xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
// }
xmlhttp.open("GET","address.xml",false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
document.getElementById("name").innerHTML = xmlDoc.getElementsByTagName("name")[0].childNodes[0].nodeValue;
document.getElementById("company").innerHTML = xmlDoc.getElementsByTagName("company")[0].childNodes[0].nodeValue;
document.getElementById("phone").innerHTML = xmlDoc.getElementsByTagName("phone")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
address.xml
file content<?xml version = "1.0"?>
<contact>
<name>Tanmay Patil</name>
<company>TutorialsPoint</company>
<phone>(011) 123-4567</phone>
</contact>
mysqldump -u username -p database_name > backup_file_name.sql