JavaScript 範例 Examples
JavaScript 範例 Examples
範例 javascriptJson-01.html : 使用 JavaScript 函數 JSON.parse() 將文本轉換為 JavaScript 物件。
<html>
<body>
<h2>從 JSON 字符串中，創建JavaScript 物件obj</h2>
<p id="demo"></p>
<script>
const txt = '{"name":"John", "age":30, "city":"New York"}';
const obj = JSON.parse(txt);
document.getElementById("demo").innerHTML = obj.name + ", " + obj.age;
</script>
</body>
</html>
範例 javascriptJson-02.html : 在從 JSON array 上使用 JSON.parse() 時，該方法將返回一個 JavaScript array，而不是一個 JavaScript 物件 object。
<html>
<body> <h2>解析 JSON Array</h2> <p>以 JSON arry形式寫入的數據將被解析為 JavaScript array。</p> <p id="demo"></p> <script> const text = '[ "Ford", "BMW", "Audi", "Fiat" ]'; const myArr = JSON.parse(text); document.getElementById("demo").innerHTML = myArr[0]; </script> </body>
</html>
範例 javascriptJson-03.js : 使用JSON.parse() 解析 包含日期的JSON字串，並存為一個 JavaScript 物件 object。
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}'
const obj = JSON.parse(text)
console.log(obj)
obj.birth = new Date(obj.birth)
console.log(obj)
執行結果
{ name: 'John', birth: '1986-12-14', city: 'New York' }
{ name: 'John', birth: 1986-12-14T00:00:00.000Z, city: 'New York' }
範例 javascriptJson-04.js : 使用 JSON.parse() 函數的第二個參數，稱為 reviver。
const text = '{"name":"John", "birth":"1986-12-14", "city":"New York"}'
const obj = JSON.parse(text)
console.log(obj)
obj.birth = new Date(obj.birth)
console.log(obj)
執行結果
{ name: 'John', birth: 1986-12-14T00:00:00.000Z, city: 'New York' }
範例 javascriptJson-05.js;在 本地存儲 local storage 中存儲數據
const myObj = { name: 'John', age: 31, city: 'New York' }
const myJSON = JSON.stringify(myObj)
localStorage.setItem('testJSON', myJSON)
// Retrieving data:
let text = localStorage.getItem('testJSON')
let obj = JSON.parse(text)
範例 javascriptJson-06.js : 您可以使用點 (.) 表示法存取物件值：
const myJSON = '{"name":"John", "age":30, "car":null}'
console.log('myJSON 資料型態是 : ' + typeof myJSON)
const myObj = JSON.parse(myJSON)
console.log('myObj 資料內容是 : ' + myObj + 'myObj 資料型態 : ' + typeof myObj)
myName = myObj.name
console.log('myName 資料內容是 : ' + myName)
執行結果
myJSON 資料型態是 : string
myObj 資料內容是 : [object Object]myObj 資料型態 : object
myName 資料內容是 : John
範例 javascriptJson-07.js : 您可以使用 for-in 循環遍歷物件屬性。
const myJSON = '{"name":"John", "age":30, "car":null}'
const myObj = JSON.parse(myJSON)
let text = ''
for (const x in myObj) {
text += x + ', '
}
console.log(text)
執行結果
name, age, car,
範例 javascriptJson-08.js : 在 for-in 循環中，使用括號表示法存取屬性值。
const myJSON = '{"name":"John", "age":30, "car":null}';
const myObj = JSON.parse(myJSON);
let text = "";
for (const x in myObj) {
text += myObj[x] + ", ";
}
console.log(text)
執行結果
John, 30, null,
範例 javascriptJson-09.js : 您可以使用 for in 迴圈遍歷陣列。
const myJSON = '{"name":"John", "age":30, "cars":["Ford", "BMW", "Fiat"]}'
const myObj = JSON.parse(myJSON)
let text = ''
for (let i in myObj.cars) {
text += myObj.cars[i] + ', '
}
console.log(text)
執行結果
Ford, BMW, Fiat,
範例 javascriptJson-10.js : 或者您可以使用 for 迴圈遍歷陣列。
const myJSON = '{"name":"John", "age":30, "cars":["Ford", "BMW", "Fiat"]}'
const myObj = JSON.parse(myJSON)
let text = ''
for (let i = 0; i < myObj.cars.length; i++) {
text += myObj.cars[i] + ', '
}
console.log(text)
執行結果
Ford, BMW, Fiat,
範例 javascriptJson-12.js : 使用以 JSON 格式接收的數據製作 HTML 表格：
const dbParam = JSON.stringify({table:"customers",limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
myObj = JSON.parse(this.responseText);
let text = ""
for (let x in myObj) {
text += "";
}
text += "| " + myObj[x].name + " |
範例 javascriptJson-13.html : 根據下拉式選單的值製作動態 HTML 表格。
<!DOCTYPE html>
<html>
<body>
<h2>Make a table based on the value of a drop down menu.</h2>
<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>
<p id="demo"></p>
<script>
function change_myselect(sel) {
const dbParam = JSON.stringify({table:sel,limit:20});
const xmlhttp = new XMLHttpRequest();
xmlhttp.onload = function() {
myObj = JSON.parse(this.responseText);
text = "<table border='1'>"
for (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", true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("x=" + dbParam);
}
</script>
</body>
</html>
範例 javascriptJson-13.html : 使用作為 JSON 接收的數據製作 HTML 下拉列表。
<!DOCTYPE html>
<html>
<body>
<h2>Make a drop down list based on JSON data.</h2>
<p id="demo"></p>
<script>
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;
}
text += "</select>"
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>
</body>
</html>
參考資料
特色、摘要，Feature、Summary:
關鍵字、標籤，Keyword、Tag:
- JavaScript,JavaScript-Examples
留言
張貼留言
Aron阿龍，謝謝您的留言互動!