iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
Modern Web

JavaScript 筆記 2 版系列 第 9

JavaScript Day09 - 物件、陣列與 JSON

  • 分享至 

  • xImage
  •  

物件與陣列組合

  • 前一天有提到,物件內也可以放物件與陣列,而陣列內也是,除了字串與數字外,也可以加入陣列與物件
  • 讀取原則
    • 陣列:第 n-1 個(因為從 0 開始),arr[n-1]
    • 物件:屬性的名稱,obj.keyNameobj["keyName"]

資料連結:高雄輕軌月均運量統計

  • 查有幾筆: data.length
  • 查第 1 筆的總運量:data[0].總運量data[0]["總運量"],會得到 275360
    (正常應該用英文命名比較好)
let data = [
    {
        "年": 107,
        "月": 1,
        "總運量": 275360,
        "日均運量": 8883,
        "假日均運量": 15132,
        "月台上刷卡日均筆數": 1734.2,
        "車上刷卡日均筆數": 5495.9,
        "售票機日均筆數": 1516.8,
        "補票日均筆數": 9.4,
        "團體票日均筆數": 126.3
    },
    // 略
    {
        "年": 110,
        "月": 8,
        "總運量": 141994,
        "日均運量": 4580,
        "假日均運量": 5851,
        "月台上刷卡日均筆數": 1407,
        "車上刷卡日均筆數": 2991.5,
        "售票機日均筆數": 175.5,
        "人工售票日均筆數": 6.4,
        "備註": ""
      }
]

JSON

  • JSON 的相關說明可以參考:Day19 - JSON
  • 就是物件與陣列的混合,屬性名稱會加入 " "

資料連結:高雄YouBike2.0公共自行車租賃站即時資訊

可以發現主要資料都放在 jsonData.data.retVal

  • 想要查站點數量:jsonData.data.retVal.length
  • 查第 1 筆的區域位置:jsonData.data.retVal[0].sarea // 鳳山區
let jsonData = {
    "contentType": "application/json",
    "isImage": false,
    "data": {
        "retCode": 1,
        "updated_at": "2021-09-24 22:09:15",
        "retVal": [
            {
                "scity": "高雄市",
                "scityen": "Kaohsiung City",
                "sna": "YouBike2.0_山仔頂溝滯洪池",
                "sarea": "鳳山區",
                "ar": "埤山路/埤北路305巷口東側",
                "snaen": "YouBike2.0_Shanziding Detention Ponds",
                "sareaen": "Fongshan Dist",
                "aren": "Pibei Rd./Lane237 Pibei Rd. (Northeast)",
                "sno": "501206115",
                "tot": "15",
                "sbi": "6",
                "mday": "20210924210116",
                "lat": "22.63428",
                "lng": "120.37921",
                "bemp": "9",
                "act": 1
            },
            // 略
        ]
    },
    "id": "cbdb9a4c-40ca-4b56-ae9d-298e14c9498f",
    "message": null,
    "success": true
}

次回

預計開始說明函式


上一篇
JavaScript Day08 - 物件
下一篇
JavaScript Day10 - 函式
系列文
JavaScript 筆記 2 版31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言