陣列與物件整合運用

前面介紹了物件與陣列基礎，透過情境知道何時要使用陣列或物件，以及物件與陣列結合在一起該如何有效運用。我們就用情境來學習如何去讀取資料和如何去規劃資料結構。

如何設計陣列物件集合資料

陣列來說，都是放幾筆幾筆資料 [0] [1] — 相同的資料用陣列做整理。
物件 : 裡面每筆資料更細部的資訊就使用物件來一一描述內容。

情境 : 有兩個水果攤

第一個水果攤，老闆叫 Tom，香蕉有 6 個，蘋果有 5 個，還沒關店。

第二個水果攤，老闆叫 John，香蕉有 9 個，蘋果有 8 個，還沒關店。

拆解資訊 (設計資料結構)

陣列 : 可以放水果攤的詳細資訊
物件 : 可以放每個水果攤的個別細部資訊

一個超級市場描述兩個水果攤資訊

let market = [
  {
    bossName: "Tom",
    bananaNum: 6,
    appleNum: 5,
    isClose: false,
  },
  {
    bossName: "John",
    bananaNum: 9,
    appleNum: 8,
    isClose: false,
  },
]
console.log(market);  // (如下圖)

一次搞懂陣列與物件混合讀取，來試著取出值看看吧 !

陣列取值 (使用「中括號」取值) : array [索引位置]
物件取值 (使用「點」來找屬性取值) : 物件.屬性

(承上段程式碼)

console.log(market[0]);  // 選取到的是物件資料
// {bossName: "Tom", bananaNum: 6, appleNum: 5, isClose: false}
// Tom (選取 market 物件資料，讀取屬性來取值)
console.log(market[0].bossName);  
console.log(market[1].appleNum);  // 8
console.log(market[1].isClose);   // false

JSON 格式介紹

傳輸共通格式

1. 有很多的資料庫，彼此間的結構不一樣，當要互相傳遞格式時，就使用共通的格式 JSON 資料來做傳遞。
2. JSON 格式資料傳遞到別人的伺服器去，就可以供對方友善的解析資料。
3. JSON 格式的屬性和值必須使用「雙引號 “ “」包起來，使格式正確。

安裝 JSON 檢視 Chrome 套件

安裝 JSONView : 使用 Chrome 顯示 JSON 格式會自動排版

JSONView

若沒有安裝的話，Chrome 顯示 JSON 格式會為「未排版」過的

若有安裝的話，Chrome 顯示 JSON 格式會為「排版」過的

下載 JSON 格式

JSON 格式資料可參考 "高雄市政府資料開放平台"

歡迎 - 高雄市政府資料開放

以「高雄市電動機車充電站」為例

「檢視網頁原始碼」打開後(即為完整資料供使用)，複製全部的 code 至你的 VSCode 裡。

( 可使用熱鍵 : ctrl + a (選取全部) -> ctrl + c (複製全部) -> ctrl + v (貼上) )

複製 JSON 資料賦予在一個變數上

let data =  貼上整筆 JSON 資料 ;   // 後面記得加上分號 (以文字敘述帶過)

先查詢看看資料是否載入正確

console.log(data);         // (如下圖) 為陣列格式，裡面有好幾筆物件
console.log(data.length);  // 136

若不想在自己的 VSCode 測試，也可開啟「開發人員除錯工具 “console”」，程式碼步驟同上來測試。

JSON 讀取 “陣列與物件資料集” 的方式 — 以充電站為例

先判斷 JSON 最外層的資料格式是「陣列」還是「物件」，才能讀取值。

• 外層是陣列格式，其中每筆資料都是物件格式。

(以三筆資料為例) 把 JSON 資料賦予在 data 變數上，取值方式如下 :

let data = [
  {"Kind":"公共充電站","Charge":"免費","Address":"高雄市中正三路34號"},
  {"Kind":"公共充電站","Charge":"免費","Address":"高雄市民權一路221號"},
  {"Kind":"公共充電站","Charge":"免費","Address":"高雄市民族二路126號"}
];
console.log(data[0].Charge);  // 免費
console.log(data[2].Address); // 高雄市民族二路126號

選取到 data (即為外層整筆陣列資料)
選取到 data[0] (即為內層第 1 筆物件資料)
選取到 data[0].Charge (使用「點」選取物件內的屬性來取值)

物件裡面還能包物件

使用物件描述細部資訊來規劃資料結構。

let home = {
  motherStatus: {
    age: 30,
    name: "Mary"
  },
  fatherStatus: {
    age: 38,
    name: "Mark"
  },
  dogs: 3
}
console.log(home.motherStatus); // {age: 30, name: "Mary"} (選到物件)

使用「點」來選取物件內的屬性值

console.log(home.motherStatus.name); // Mary
console.log(home.fatherStatus.age);  // 38

物件包物件讀取流程 — 以活動公告 open data 為例

JSON 格式資料可參考高雄市政府資料開放平台

高雄市政府相關求才、求職、職業訓練資訊及最新資訊發佈

「檢視網頁原始碼」打開後(即為完整資料供使用)，複製全部的 code 至 VSCode 裡。

• 觀察此資料集外層為「物件格式」(有兩個屬性)

複製 JSON 資料賦予在一個變數上。

( 抓三筆資料代表練習 )

let data = {
  "paging": { "limit": 100, "offset": 0, "total": 3 }, 
  "entries": [
    { 
      title: "【楠梓】110年3月22日(一)閃耀集廣 薪職場",
      category: "就促活動",
      publication_date: "2021-02-22",
    },
    { 
      title: "就業快報110-04期",
      category: "就業快報",
      publication_date: "2021-02-21",
    },
    { 
      title: "★前鎮站本週連四場徵才系列活動，歡迎來參加！",
      category: "一般訊息",
      publication_date: "2021-02-20",
    }
  ]
};

先 console.log(data)查詢看看資料是否載入正確

console.log(data);  // {paging: {…}, entries: Array(3)}
console.log(data.paging);       // {limit: 100, offset: 0, total: 3}
console.log(data.paging.total); // 3
console.log(data.entries[1]);    
// {title: "就業快報110-04期", category: "就業快報", publication_date: "2021-02-21"}
console.log(data.entries[1].title);   // 就業快報110-04期

篩選出自己想要的資料格式，並賦予到特定變數上

1. 先建立一個空變數
2. 想要撈物件 data 內的屬性 entries 的資料

let ary = data.entries;   // 選到 entries 的陣列資料
console.log(ary);         // (3)[{…}, {…}, {…}] (得到處理過乾淨的陣列)
console.log(ary.length);  // 3

✏️ 練習取值

let data = {
  isImage: false,
  data: {
    XML_Head: {
      Listname: "1",
      Infos: {
        Info: [
          {
            Id: "C1_397000000A_000230",
            Name: "田寮月世界",
            Description: "田寮「月世界」特殊景觀在地理學稱為「惡地」...",
            Opentime: "遊客中心：09:00–17:00月世界：全天候開放",
          },
          {
            Id: "C1_397000000A_000234",
            Name: "西子灣風景區",
            Description: "西子灣以夕陽美景及天然礁石聞名，...",
            Opentime: "西子灣海水浴場：10:00–16:00",
          }
        ]
      }
    }
  }
};
console.log(data);          // 預設為物件資料
console.log(data.isImage);  // false
console.log(data.data.XML_Head.Listname);    // 1
console.log(data.data.XML_Head.Infos.Info);  // (撈到兩筆陣列資料)
console.log(data.data.XML_Head.Infos.Info[0].Name);  // 田寮月世界

✏️ 物件搭配 if 練習

let tomStatus = {        // 定義物件(Tom)的狀態內容 - 資料集
  name : "Tom",
  age : 30,
  status : ""
}
tomStatus.degree = 36.5;  // 新增資料

// 判斷完再寫入資料
if(tomStatus.degree >= 37.5){
  console.log('您不得進入');
  tomStatus.status = '您不得進入';  // 複寫原本 tomStatus.degree 的值
}else{
  console.log('您可以進入');        // 您可以進入
  tomStatus.status = '您可以進入';
}
console.log(tomStatus);  
// {name: "Tom", age: 30, status: "您可以進入", degree: 36.5}

✏️ 陣列物件搭配 if 流程判斷練習

思考該如何設計情境

let peopleStatus = [
  {                
    name : "Tom",
    age : 30,
    status : ""
  }
]
peopleStatus[0].degree = 36.5;  // 新增資料
console.log(peopleStatus[0]);   // 確認一下物件內容是否有加入屬性 degree
// {name: "Tom", age: 30, status: "", degree: 36.5}

if(peopleStatus[0].degree >= 37.5){
  peopleStatus[0].degree = '您不得進入';  
  // 複寫原本 peopleStatus[0].degree 的值
  console.log('您不得進入');
}else{
  peopleStatus[0].degree = '您可以進入';  
  // 複寫原本 peopleStatus[0].degree 的值
  console.log('您可以進入');  // 您可以進入
}
console.log(peopleStatus[0]);  
// {name: "Tom", age: 30, status: "", degree: "您可以進入"}