【JavaScript】forEach文でJSONデータ取得する

関野泰宏

2022年9月30日 11:31

JSON形式のデータの中身をforEach文で取得できる方法になります。

forEach文は、コールバック関数の引数valueに、配列の値が1つずつ代入される構文です。
こちらから使い方の確認ができます。

【JavaScript】forEach文の使い方

JSONデータはJavaScriptのオブジェクト構造によく似ています。

JSON形式のいいところはサーバー間でデータのやり取りを行う時によく使われているところです。

JSONのデータは、このような形で記述されています。気象庁のデータから一部拝借してます。

https://www.jma.go.jp/bosai/forecast/data/forecast/130000.json

var json = '
[
     {
      "area": {
       "name": "東京地方",
       "code": "130010"
      },
      "weatherCodes": [
       "101",
       "101",
       "101"
      ],
      "weathers": [
       "晴れ　時々　くもり",
       "晴れ　朝晩　くもり",
       "晴れ　時々　くもり"
      ],
      "winds": [
       "北東の風",
       "北の風　後　北東の風",
       "北の風　後　東の風"
      ],
      "waves": [
       "０．５メートル",
       "０．５メートル",
       "０．５メートル"
      ]
     },
     {
      "area": {
       "name": "伊豆諸島北部",
       "code": "130020"
      },
      "weatherCodes": [
       "201",
       "101",
       "101"
      ],
      "weathers": [
       "くもり　時々　晴れ　所により　昼前　雨",
       "晴れ　時々　くもり",
       "晴れ　時々　くもり"
      ],
      "winds": [
       "北東の風　やや強く",
       "北東の風　やや強く",
       "北東の風　やや強く"
      ],
      "waves": [
       "２メートル　うねり　を伴う　ただし　新島　では　２メートル　後　２．５メートル　うねり　を伴う",
       "２．５メートル　うねり　を伴う　ただし　新島　では　３メートル　うねり　を伴う",
       "２．５メートル　うねり　を伴う　ただし　新島　では　３メートル　うねり　を伴う"
      ]
     },
     {
      "area": {
       "name": "伊豆諸島南部",
       "code": "130030"
      },
      "weatherCodes": [
       "313",
       "210",
       "201"
      ],
      "weathers": [
       "雨　昼過ぎ　から　くもり　所により　昼前　雷を伴い　激しく　降る",
       "くもり　昼過ぎ　から　時々　晴れ　所により　昼前　まで　雨　で　雷を伴う",
       "くもり　時々　晴れ"
      ],
      "winds": [
       "北東の風　後　やや強く",
       "北東の風　やや強く",
       "北東の風　やや強く"
      ],
      "waves": [
       "２メートル　後　２．５メートル　うねり　を伴う",
       "３メートル　うねり　を伴う",
       "４メートル　うねり　を伴う"
      ]
     },
     {
      "area": {
       "name": "小笠原諸島",
       "code": "130040"
      },
      "weatherCodes": [
       "201",
       "210",
       "201"
      ],
      "weathers": [
       "くもり　時々　晴れ　所により　雨　で　雷を伴う",
       "くもり　昼過ぎ　から　時々　晴れ　所により　夕方　まで　雨　で　雷を伴う",
       "くもり　時々　晴れ"
      ],
      "winds": [
       "南の風　後　やや強く",
       "南西の風　やや強く　後　西の風",
       "北の風　後　北東の風"
      ],
      "waves": [
       "１．５メートル　後　２．５メートル　うねり　を伴う",
       "３メートル　うねり　を伴う",
       "２．５メートル　後　２メートル　うねり　を伴う"
      ]
     }
]
'

このJSONの中身をforEachで取得するには、JSONをJavaScriptで扱えるオブジェクトに変換します。

var obj = JSON.parse(json);

「JSON.parse()」を使えば簡単にJSON形式からオブジェクトに変換できます。

このオブジェクトの「キー」を配列構造にしてからforEachを使います。

Object.keys(obj).forEach(function(key) {
    console.log(obj[key]);
});

サンプルプログラム

注意
JSONデータを見やすいようにスペースや改行を含めて書いてます。
このままコピペしても動かないので、プログラムダウンロードからダウンロードして動かしてください。

<html>
<head>
    <title>forEachでJSONデータを取得</title>
</head>
<script>
    
    //データ部分
    var json = '[
     {
      "area": {
       "name": "東京地方",
       "code": "130010"
      },
      "weatherCodes": [
       "101",
       "101",
       "101"
      ],
      "weathers": [
       "晴れ　時々　くもり",
       "晴れ　朝晩　くもり",
       "晴れ　時々　くもり"
      ],
      "winds": [
       "北東の風",
       "北の風　後　北東の風",
       "北の風　後　東の風"
      ],
      "waves": [
       "０．５メートル",
       "０．５メートル",
       "０．５メートル"
      ]
     },
     {
      "area": {
       "name": "伊豆諸島北部",
       "code": "130020"
      },
      "weatherCodes": [
       "201",
       "101",
       "101"
      ],
      "weathers": [
       "くもり　時々　晴れ　所により　昼前　雨",
       "晴れ　時々　くもり",
       "晴れ　時々　くもり"
      ],
      "winds": [
       "北東の風　やや強く",
       "北東の風　やや強く",
       "北東の風　やや強く"
      ],
      "waves": [
       "２メートル　うねり　を伴う　ただし　新島　では　２メートル　後　２．５メートル　うねり　を伴う",
       "２．５メートル　うねり　を伴う　ただし　新島　では　３メートル　うねり　を伴う",
       "２．５メートル　うねり　を伴う　ただし　新島　では　３メートル　うねり　を伴う"
      ]
     },
     {
      "area": {
       "name": "伊豆諸島南部",
       "code": "130030"
      },
      "weatherCodes": [
       "313",
       "210",
       "201"
      ],
      "weathers": [
       "雨　昼過ぎ　から　くもり　所により　昼前　雷を伴い　激しく　降る",
       "くもり　昼過ぎ　から　時々　晴れ　所により　昼前　まで　雨　で　雷を伴う",
       "くもり　時々　晴れ"
      ],
      "winds": [
       "北東の風　後　やや強く",
       "北東の風　やや強く",
       "北東の風　やや強く"
      ],
      "waves": [
       "２メートル　後　２．５メートル　うねり　を伴う",
       "３メートル　うねり　を伴う",
       "４メートル　うねり　を伴う"
      ]
     },
     {
      "area": {
       "name": "小笠原諸島",
       "code": "130040"
      },
      "weatherCodes": [
       "201",
       "210",
       "201"
      ],
      "weathers": [
       "くもり　時々　晴れ　所により　雨　で　雷を伴う",
       "くもり　昼過ぎ　から　時々　晴れ　所により　夕方　まで　雨　で　雷を伴う",
       "くもり　時々　晴れ"
      ],
      "winds": [
       "南の風　後　やや強く",
       "南西の風　やや強く　後　西の風",
       "北の風　後　北東の風"
      ],
      "waves": [
       "１．５メートル　後　２．５メートル　うねり　を伴う",
       "３メートル　うねり　を伴う",
       "２．５メートル　後　２メートル　うねり　を伴う"
      ]
     }
     ];'

    //データ取得部分
    var obj = JSON.parse(json);
    
    Object.keys(obj).forEach(function(key) {
        console.log(obj[key]);
    });
</script>
</head>
<body>
</body>
<html>

プログラムダウンロード

実行結果

コンソール画面でキレイにデータが取得できていることが確認できます。

もっとJavaScriptを学びたい人は！こちらの本がおすすめです

#JavaScript #JavaScript初心者 #JavaScript学習 #プログラミング #プログラミング学習 #プログラミング初心者

この記事が気に入ったらサポートをしてみませんか？