# JavaScript - 陣列與物件混合應用 & JSON 資料格式
###### tags: `javascript` `array` `object` `JSON`

## 陣列與物件混合應用
### 讀取方式
* 讀取陣列裡面的物件資料 使用[]
* 讀取陣列裡面的物件資料的屬性 使用.

let market = [
    {
        bossName: 'Tom',
        bananaNum: 6,
        appleNum: 5,
        isClose: false
    },
    {
        bossName: 'John',
        bananaNum: 9,
        appleNum: 8,
        isClose: false
    }
]

console.log(market[0]); 
console.log(market[0].bossName);
console.log(market[1].appleNum);
console.log(market[0].isClose);

## 資料交換格式 JSON
* 為資料庫的共通格式
* 資料格式 JSON 陣列+物件
* 目前 JSON 使用在 JavaScript、Java、Node.js 應用的情況比較多，PHP、C# 等開發的 WEB 應用主要還是使用 XML。

{
     "firstName": "John",
     "lastName": "Smith",
     "sex": "male",
     "age": 25,
     "address": 
     {
         "streetAddress": "21 2nd Street",
         "city": "New York",
         "state": "NY",
         "postalCode": "10021"
     },
     "phoneNumber": 
     [
         {
           "type": "home",
           "number": "212 555-1234"
         },
         {
           "type": "fax",
           "number": "646 555-4567"
         }
     ]
 }

### JSON 工具
* [JSONView 安裝](https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=zh-TW)

### OPEN DATA 開放資料官網網站
* [高雄 OPEN DATA 開放資料官網網站](https://data.kcg.gov.tw/)

## 如何篩選出自己想要的資料格式，並賦予到特定變數上
* [範例一 JSON 資料](https://cdn.fs.teachablecdn.com/OCqdvvQ6CYXsJNFlPIgT)

let data = {paging: {…}, entries: Array(13)}

console.log(data);
>entries: (13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
>paging: {limit: 100, offset: 0, total: 13}

console.log(data.paging.limit);
>100

console.log(data.entries[1].title);
>公告受理申請『110年度高雄市補助辦理照顧服務員用人單位自訓自用訓練計畫』，自即日起至110年3月2日(星期二)下午5時止，有關申請注意事項，請詳閱本案公告。

let ary = data.entries;
console.log(ary);
>(13) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

console.log(ary.length);
>13

console.log(ary[0].title);
>110年第1梯次產訓合作職前訓練錄取名單公告

* [範例二 JSON 資料](https://cdn.fs.teachablecdn.com/2oFNlRbaSb6M9oeiDM0z)

let data =
{
    "contentType": "application/json; charset=utf-8",
    "isImage": false,
    "data": {
        "XML_Head": {
            "Listname": "1",
            "Language": "C",
            "Orgname": "397000000A",
            "Updatetime": "2021/01/20 08:40:00",
            "Infos": {
                "Info": [
                    {
                        "Id": "C1_397000000A_000230",
                        "Status": "2",
                        "Name": "田寮月世界",
                        "Zone": "",
                        "Toldescribe": "田寮「月世界」特殊景觀在地理學上稱為「惡地」，是由於地殼的「回春作用」，經年累月的經由雨水與河水強烈侵蝕，將泥沙堆積在泥岩上，地層變動後，泥沙更與泥岩混合再經由風化、沉積作用，形成今日地貌，僅適於耐旱、耐鹽的淺根植物（如：箭竹）、濱海植物生長。從田寮到旗山台28線沿路除了月世界景觀，還有大小不等的二十多個泥火山，常呈現間歇性的噴發現象，噴發的規模則視地底天然氣與泥漿的累積壓力而定，噴發後的泥流堆積地區。",
                        "Description": "田寮「月世界」特殊景觀在地理學稱為「惡地」，經年累月由雨、河水侵蝕，將泥沙堆積在泥岩上，泥沙與泥岩混合經由風化形成。",
                        "Tel": "886-7-6367036",
                        "Add": "高雄市823田寮區崇德里月球路36號",
                        "Zipcode": "823",
                        "Travellinginfo": "無障礙交通：高鐵台南站 → 沙旗美月世界快線公車 → 月世界 → 旗山高鐵左營站 → 旗美快線公車 → 旗山 → 轉搭沙旗美月世界快線公車 → 月世界",
                        "Opentime": "遊客中心：09:00–17:00月世界：全天候開放",
                        "Gov": "397000000A",
                        "Px": "120.38898",
                        "Py": "22.88600"
                    },
                    {
                        "Id": "C1_397000000A_000234",
                        "Status": "2",
                        "Name": "西子灣風景區",
                        "Zone": "",
                        "Toldescribe": "西子灣以夕陽美景及天然礁石聞名，區內包括了西子灣海水浴場、海濱公園、打狗英國領事館....等景點；可觀海景、遠眺高雄港；海水浴場極富熱帶氣息、南國風情，每當夜幕低垂，晚霞的照耀，漁船燈火閃爍其間，呈現海天一色美景。",
                        "Description": "西子灣以夕陽美景及天然礁石聞名，區內包括了西子灣海水浴場、海濱公園、打狗英國領事館....等景點。",
                        "Tel": "886-7-5250005",
                        "Add": "高雄市804鼓山區蓮海路51號",
                        "Zipcode": "804",
                        "Travellinginfo": "搭高鐵至左營站下或搭臺鐵至高雄站下 → 轉搭高雄捷運至西子灣站下 → 轉搭高雄市公車(99路、橘1A路)至西子灣站下。",
                        "Opentime": "西子灣海水浴場：10:00–16:00",
                        "Gov": "397000000A",
                        "Px": "120.26391",
                        "Py": "22.62442"
                    }
                ]
            }
        }
    },
    "id": "b69ffff9-23a5-44a6-a398-089b11a5f84c",
    "success": true
}

console.log(data.isImage);
//false
console.log(data.data.XML_Head.Infos.Info[0].Name);
//田寮月世界
console.log(data.data.XML_Head.Infos.Info[1].Opentime);
//西子灣海水浴場：10:00–16:00

## 陣列物件搭配 if 流程判斷練習
* [流程判斷圖線上版本](https://whimsical.com/4oYtsHWjADWsieeNrjY1Xa)

// Tom的個人狀態
let tomStatus = {
    name: "Tom",
    age: 30,
    status: "", //狀態未知，先設為空字串
}

tomStatus.degree = 36.5;

if (tomStatus.degree >= 37.5) {
    console.log("您不得進入");
    //確定狀態後，將狀態值寫入屬性
    tomStatus.status = "您不得進入";
} else {
    console.log("您可以進入");
    //確定狀態後，將狀態值寫入屬性
    tomStatus.status = "您可以進入";
}

// 
// 多名狀態
let peopleStatus = [
    {
        name: "Tom",
        age: 30,
        status: "", //狀態未知，先設為空字串
    },
    {
        name: "mary",
        age: 25,
        status: "", //狀態未知，先設為空字串
    },
    {
        name: "Kim",
        age: 35,
        status: "", //狀態未知，先設為空字串
    }
]

peopleStatus[0].degree = 35;
peopleStatus[1].degree = 37.5;
peopleStatus[2].degree = 39;

console.log(peopleStatus[0]);

if (peopleStatus[0].degree >= 37.5) {
    peopleStatus[0].status = "您不得進入";
    console.log("您不得進入");
} else {
    peopleStatus[0].status = "您可以進入";
    console.log("您可以進入");
}

if (peopleStatus[1].degree >= 37.5) {
    peopleStatus[1].status = "您不得進入";
    console.log("您不得進入");
} else {
    peopleStatus[1].status = "您可以進入";
    console.log("您可以進入");
}

if (peopleStatus[2].degree >= 37.5) {
    peopleStatus[2].status = "您不得進入";
    console.log("您不得進入");
} else {
    peopleStatus[2].status = "您可以進入";
    console.log("您可以進入");
}