Objects & JSON

Object { }

object 的組成都有 property(key) 跟這個 property 的 value。value 可以是一串 Array、也可以是 boolean 等等。

可以把 object 想像成一個 item 裡面有許多不同的變數跟變數的值:

var product = {
name: “StudyBook”,
color: “red”,
qty: 3,
skills: [‘JavaScript’, ‘Python’],
students: true;
}

怎麼拿 Objects 資料

例如:在這邊 product.name 就會拿到 name 這個 property 的 value,或是寫可以寫成 product[‘name’]

console.log(product.name); // 會拿到 StudyBook 這個值
console.log(product['name']); // 也會拿到 StudyBook 這個值,因為 name 的值是 string ,所以要記得用 ' '。

若 object 裡頭的 value 有 Array,可以把 Array 轉成字串:

product.skills.join(‘, ‘);

如何增減、改變 object property 裡頭的 value?

product.name = “TextBook”; //這樣就直接改掉了
product.name = “Anna’s Diary”; //這樣就直接增加了
product.qty += 1; //product 的 qty 現在就變成 4 了。

在讀 Objects 或 Array 資料後要畫出來

作法:用一個 function 包住一個變數,這個變數是 HTML 上某個有 id 值的 div,然後他的 innerHTML 會等於一串文字。到時候再把變數塞進去就行了。

function print(message){
var div = document.getElementById(‘output’);
div.innerHTML = message;
}

var message = ‘<p> Hello</p>’ + product.name;
print(message);

Objects & For loop

常會用到: for ( var key in object的變數名稱)

var student = {
name: “Dave”,
grades:[80, 85, 90, 95]
};

for ( var key in student ) {
console.log(key);
}

這裡的 student 指的是 → 名叫 student 的這個 object 變數

這裡的 key → 有點像是 function 裡的參數,這邊是指 student 這個 object 裡頭的 property / key (key 其實就是一個變數而已,可以自己取,可以改成 propertyName 之類的)。*for __ var in __ 是不能改的

所以 log 出來的結果就是 student 這個 object 所有的 property。這裡會是 name 跟 grades。

注意:在這個 for loop 裡面要找值一定要用[ ]。用 . 的話會變成去找一個 student 底下叫做 key 的 property:

for(var key in student){
console.log(student[key]);
} //這邊就會把所有 student 裡面的 property 裡的值印出來,也就是 Dave 跟 [80, 85, 90, 95]

若想要完整地讀出 property & value:

for(var key in student){
console.log(key, ‘:’, student[key]);
}
log 結果會是:
name : Dave
grades:[80, 85, 90, 95]

如果只要印出某個 property 的 value:

for(var key in student){
console.log(key, ‘:’, student[“name”]);
}

log 結果會是:
會印出所以的 property 後面有 :,然後值會是 name 這個 string。
name : Dave
grades:Dave

Array of object

Array of Array 時:

var questions = [
[‘How many states are in the United States?’, 50],
[‘How many states are in the United States?’, 50],
[‘How many states are in the United States?’, 50]
];

假設要讀出所有的資料然後印出來:

var questions = [
 [‘How many states are in the United States?’, 50],
 [‘How many states are in the United States?’, 50],
 [‘How many states are in the United States?’, 50]
];

var question;
var answer;

//要印出答案,然後要告訴別人答對幾題
var response;
var correctAnswers = 0; //一開始沒答題所以是 0

//印出資料通常會用一個 print function,最後的得到某個結果或答案時後再召喚它
function print(message){
document.write(message);
}

for (var i = 0; i < questions.length; i ++){
//一開始就要先去抓變數是對應哪個值了
question = questions[i][0];
answer = questions[i][1];

// 回答的狀況
response = prompt (question);
response = parseInt(response); //把答案轉換成數字
if(response === answer){
 correctAnswers += 1;
}
}

//最後印出資料
var html = “You got” + correctAnswers + “questions(s) right.”
print(html);

Array of Objects 時:

改寫:

var questions = [
 { Q:’How many states are in the United States?’,
 A:50
},

{ Q:’How many states are in the United States?’,
 A:50
 },

{ Q:’How many states are in the United States?’,
A:50
 }
];

假設要讀出所有的資料然後印出來:

var questions = [
{ Q:’How many states are in the United States?’,
A:50
},
{ Q:’How many states are in the United States?’,
A:50
},
{ Q:’How many states are in the United States?’,
A:50
}
];
var question;
var answer;

//要印出答案,然後要告訴別人答對幾題
var response;
var correctAnswers = 0; //一開始沒答題當然是 0

//印出資料通常會再用一個 function,最資料得到後再召喚他
function print(message){
document.write(message);
}

for (var i = 0; i < questions.length; i ++){
//一開始就要先去抓變數是對應哪個值了
question = questions[i].Q;
answer = questions[i].A;

// 回答的狀況
response = prompt (question);
response = parseInt(response); //把答案轉換成數字

if(response === answer){
correctAnswers += 1;
}
}

//最後才印出資料
var html = “You got” + correctAnswers + “questions(s) right.”
print(html);

JSON ( JavaScript Object Notation )

通常是一個 array of object

-One of the most popular data exchange formats on the web.-Let Ajax to exchange data between a server and a web browser. ( web server 彼此之間也可用 JSON 互相傳遞資料)

其實就是一串 string formatted just like JS objects,web server 通常都會拿它來轉成 pure JS 來傳遞資料。( HTML 本身也是一串 string of tags and words )。


Objects 範例

假設我拿到一個名為 students 的 Object,裡面的 key 有 students 的 name、track,我現在想拿到這些資料並印出來:

var students = {
name: "Annie",
track: "B"
}

//在 for loop 前,要先定義好變數,把這些變數等於 object 裡面的資料
var message = ‘ ‘;
var student; 

//最後把結果印出
function print(message) {
var div = document.getElementById(‘output’);
div.innerHTML = message;
} 

for (var i = 0; i < students.length; i += 1){
student = students[i];
message += ‘<h2> Student:’ + student.name + ‘</h2>’;
message +=’<p> Track:’ + student.track + ‘</p>’;

// 會由上往下印,印完後再重複重複直到 student.lenghth 的次數
}

print(message); //印出這個 object 裡頭每一個學生的姓名

假設我需要這個 loop 跑到某一個地方就停,要怎麼做?

var students = {
name: "Annie",
track: "B"
}

//在 for loop 前,要先定義好變數,把這些變數等於 object 裡面的資料
var message = ‘ ‘;
var student;
var search;

//最後把結果印出來
function print(message) {
var div = document.getElementById(‘output’);
div.innerHTML = message;
}

//增加一個去查找 student 的資料,這邊還沒印出來
function getStudentReport( student ){
var report = ‘<h2>Student: ‘ + student.name + ‘</h2>’;
report += ‘<p> Track: ‘ + student.track + ‘</p>’;
return report; //宣告函式跑到這邊就中止
}

while(true){
search = prompt(‘Search student records: type a name [Jody] (or type “quit” to end)’);
if(search === null || search.toLowerCase() === ‘quit’){
break;
}
//當搜尋跳出來,使用者打空值或是打 quit,就會直接終止,不會跑 loop(把 for loop 包在 while 裡)

for(var i = 0; i < students.length; i += 1){
student = students[i];
// for loop 裡面跑到某狀況時

if ( students.name === search ){
message = getStudentReport( student );
//把跑出來的資料印出來
print(message);
}
}