JSONから都道府県の座標を取得して配列オブジェクトに格納したい。

Question

JSONから都道府県の座標を取得して配列オブジェクトに格納したいと思っております。

$.getJSON("/map/assets/json/map.json", (list) => {
      // console.log(list)
      let mapPosition = [];
      for (var i = 0; i < list.marker.length; i++) {
        var lat = list.marker[i].lat;
        var lng = list.marker[i].lng;

        mapPosition = [{ lat: lat, lng: lng }];
        //console.log(mapPosition)
      }

{
  "marker": [
    {
      "pref": "北海道",
      "url": "http://www.pref.hokkaido.lg.jp/",
      "addr": "北海道札幌市中央区北3条西6丁目",
      "lat": 43.064301,
      "lng": 141.346874
    },
    {
      "pref": "青森県",
      "url": "http://www.pref.aomori.lg.jp/",
      "addr": "青森県青森市長島一丁目1-1",
      "lat": 40.824622,
      "lng": 140.740598
    },
    {
      "pref": "岩手県",
      "url": "http://www.pref.iwate.jp/",
      "addr": "岩手県盛岡市内丸10番1号",
      "lat": 39.7036,
      "lng": 141.152709
    }
  ]
}
※一部割愛

上記条件でmapPositionに配列オブジェクトとして座標の値を取得したいのですが、うまくできずにおります。

実現したい形としては

const mapPosition = [
      { lat: 35.6849051, lng: 139.7270029 },
      { lat: 34.7024854, lng: 135.4937566 },
      { lat: 33.5885861, lng: 130.3772019 },
      { lat: 43.0686606, lng: 141.3485613 },
    ];

上記のような形で格納し後にmapPositionのindexを指定して処理を続けたいとおもっておりました。

しかし、現在のコードでの実行結果では

const mapPosition = [
      { lat: 35.6849051, lng: 139.7270029 },
    ];
const mapPosition = [
      { lat: 34.7024854, lng: 135.4937566 },
    ];
const mapPosition = [
      { lat: 33.5885861, lng: 130.3772019 },
    ];
＊console.log()の結果を置き換えております

lengthの回数分配列オブジェクトが生成されてしまいます。

for文の中で宣言しているからではと思い

 $.getJSON("/partners/map/assets/json/test.json", (list) => {
   // console.log(list)
   for (var i = 0; i < list.marker.length; i++) {
     var lat = list.marker[i].lat;
     var lng = list.marker[i].lng;
   }
   let mapPosition = [];
   mapPosition = [{ lat: lat, lng: lng }];
   console.log(mapPosition)
 });

for文の外での宣言も試してみましたが

const mapPosition = [
      { lat: 26.212418, lng: 127.680895 },
    ];
＊console.log()の結果を置き換えております

存在しない座標の取得、lengthも0となっており自力で解決ができませんでした。

解決策お分かりになる方がいましたら回答お待ちしております。

Answer 1

ループの中で毎回 mapPosition に新しい配列を入れるのではなく、push を使って追加すれば良いのでは。
また、オブジェクトのプロパティ名と変数名が同じ場合は { lat, lng } のように短縮構文を使えます。

     $.getJSON("/map/assets/json/map.json", (list) => {
       // console.log(list)
       let mapPosition = [];
       for (var i = 0; i < list.marker.length; i++) {
         var lat = list.marker[i].lat;
         var lng = list.marker[i].lng;
 
-        mapPosition = [{ lat: lat, lng: lng }];
+        mapPosition.push({ lat, lng });
         //console.log(mapPosition)
       }
+      console.log(mapPosition);
     });

さらに、配列の map や引数の分割代入を使えば、もっと短く書けます。

    $.getJSON("/map/assets/json/map.json", (list) => {
      let mapPosition = list.marker.map(({ lat, lng }) => ({ lat, lng }));
      console.log(mapPosition);
    });

Comments

[atk_3]

ありがとうございます！
無事、実現できました。

参考リンクなどもいただきありがとうございます！