-------
Phần 29.
Vòng lặp và JSON trong jQuery
Đây là
clip số 12: vòng lặp trong jQuery
Ví dụ, không
dùng vòng lặp:
[HTML]
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
</ul>
[JavaScript]
$(document).ready(function() {
var
arrLi = $('li').text();
alert(arrLi);
});
Ví dụ,
có dùng vòng lặp:
$(document).ready(function() {
$('li').each(function(){
alert($(this).text());
});
});
Mặc
định, hàm trong vòng lặp each() không có tham số, tuy nhiên có thể thêm tham số cho
nó, ví dụ,
[JavaScript]
$(document).ready(function() {
$('li').each(function(index,
element){
alert(index
+ ' ' + $(element).text());
});
});
Trong
đó, index là
chỉ số lặp, giá trị bắt đầu là 0, element tham chiếu đến từng phần tử của danh sách, vai trò
của element
và this là
như nhau.
Để ngắt
vòng lặp, sử dụng lệnh return false;
Ví dụ,
[JavaScript]
$(document).ready(function() {
$('li').each(function(index,
element){
if
($(element).text() !== 'C'){
alert(index
+ ' ' + $(element).text());
}
else {
return
false;
}
});
});
Thực ra,
jQuery đã trang bị vòng lặp ngầm định trên các đối tượng jQuery, do vậy trong
nhiều trường hợp, không nhất thiết phải chạy thêm vòng lặp để xử lý từng phần
tử trong đối tượng jQuery (trong trường hợp đối tượng jQuery có nhiều phần tử).
Ví dụ,
$(document).ready(function() {
var
arrLi = $('li').text();
alert(arrLi);
});
Trong
trường hợp trên, jQuery sẽ tự duyệt tất cả các phần tử trong đối tượng $(‘li’) và lấy ra phần văn bản, bằng
cách sử dụng hàm text().
Chaining
method là cách thức gọi liên tiếp các method trên một đối tượng jQuery, ví dụ
dòng lệnh $(this).text('ABC').css('color', 'red') .css('text-decoration', 'underline');
dưới đây.
<script>
$(document).ready(function()
{
$('li').each(function(){
$(this).text('ABC')
.css('color',
'red')
.css('text-decoration',
'underline');
});
});
</script>
Đây là
clip số 13: giới thiệu về JSON
JSON
(JavaScript Object Notation) là một kiểu dữ liệu trong JavaScript. Kiểu dữ liệu
này chủ yếu là dạng text. Về cấu trúc, nó mô tả một thực thể,
bằng cách bao những thực thể con bằng thực thể lớn hơn, trong dấu ngoặc nhọn ({
}).
JSON lưu dữ liệu dưới dạng cặp {key:value}.
JSON là một kiểu dữ liệu trung gian, chủ yếu được dùng để
trao đổi thông tin giữa các thành phần của một chương trình. (tham khảo https://vi.wikipedia.org/wiki/JavaScript_Object_Notation)
Có thể đọc thêm về JSON tại đây: http://www.json.org/json-vi.html
Ví dụ,
<!DOCTYPE html>
<html lang="en">
<head>
<meta
charset="UTF-8">
<title>Document</title>
<script
src="jquery.js"></script>
<script>
$(document).ready(function()
{
var
employeeJSON = {
"name"
: "Nguyễn Văn Tèo",
"age"
: "30"
};
$('#result').text(employeeJSON.name
+ ' ' + employeeJSON.age);
});
</script>
</head>
<body>
<div
id="result"></div>
</body>
</html>
Khai báo đối tượng JSON,
var employeeJSON = {
"name"
: "Nguyễn Văn Tèo",
"age" : "30”
};
Ví dụ, khai báo mảng đối tượng JSON,
var employeeJSONList = [{
"name"
: "Nguyễn Văn Tèo",
"age" : "30"
},
{
"name"
: "Nguyễn Văn Tí",
"age" : "15"
}];
Truy
cập đối tượng JSON,
$('#result').text(employeeJSON.name + ' ' + employeeJSON.age);
Truy
cập mảng đối tượng JSON,
$(document).ready(function() {
$('#result').text(employeeJSON[0].name
+ ' ' + employeeJSON[0].age);
});
Có thể
dùng vòng lặp each() cho mảng đối tượng JSON.
Đọc thêm
về vòng lặp $.each() tại đây: http://api.jquery.com/jquery.each/
Cú pháp
của vòng lặp $.each():
$.each(array,
callback)
Trong
đó,
- array: vòng lặp each() sẽ duyệt qua từng
phần tử của mảng này
- callback: với mỗi phần tử của mảng array sẽ
thực thi hàm này
Cú pháp
của hàm callback:
Function(
Interger indexInArray, Object value)
Trong
đó,
- indexInArray:
chỉ số của mảng array
-
value: giá trị của mảng array tương ứng với chỉ số indexInArray
Ví dụ,
$.each([
52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
Kết quả
xuất ra là:
0: 52
1: 97
Ví dụ
$.each() trên mảng JSON:
$(document).ready(function() {
var
employeeJSON = [{
"name"
: "Nguyễn Văn Tèo",
"age"
: "30"
},
{
"name"
: "Nguyễn Văn Tí",
"age"
: "40"
}];
var
result = '';
$.each(employeeJSON,
function(index, value) {
result
+= value.name + ' ';
});
$('#result').text(result);
});
Đây là
clip số 14: đổi đối tượng JSON sang chuỗi và ngược lại
Để đổi
từ đối tượng JSON sang chuỗi JSON, sử dụng hàm JSON.stringify(objectJSON).
Theo từ
điển Cambridge, cái đuôi “ify” trong từ stringify có nghĩa là “used to form
verbs meaning to cause an increase in the stated quality; to become”.
Chuỗi
JSON không phải là chuỗi thông thường mà nó có dạng:
[{"name":"Nguyễn
Văn Tèo","age":"30"},{"name":"Nguyễn
Văn Tí","age":"40"}]
Hoặc,
{"name":"Nguyễn
Văn Tèo","age":"30"}
Ví dụ,
$(document).ready(function() {
var
employeeJSON = [{
"name"
: "Nguyễn Văn Tèo",
"age"
: "30"
},
{
"name"
: "Nguyễn Văn Tí",
"age"
: "40"
}];
var
result = '';
result
= JSON.stringify(employeeJSON[0]);
$('#result').text(result);
});
Đọc
thêm về JSON.stringify tại đây: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify
Để đổi
từ chuỗi JSON sang đối tượng JSON, sử dụng hàm JSON.parse(stringJSON). Ví dụ,
$(document).ready(function() {
var
employeeJSON = [{
"name"
: "Nguyễn Văn Tèo",
"age"
: "30"
},
{
"name"
: "Nguyễn Văn Tí",
"age"
: "40"
}];
var
result = '';
result
= JSON.stringify(employeeJSON);
$('#result').text(result);
console.log(JSON.parse($('#result').text()));
});
Xem
lướt qua cho biết, phần chuyển từ đối tượng JSON sang một kiểu dữ liệu của .NET.
Serialize có nghĩa là chuyển đổi từng phần.
-----------
Cập nhật [4/10/2017][4/10/2016]
-----------