【JavaScript】連想配列（オブジェクト配列）を必要プロパティを抜き取って新たな配列を作り直す

JavaScript/jQuery

もくじ

はじめに

「オブジェクト配列から指定のプロパティを抜き出す」という記事は多く見受けられたんですが、そこから新たはオブジェクトを作る記事がなかなか見つけられませんでした。

初心者の私は困ったので、似たような方の助けになれば幸いです。

もとの連想配列

サンプルとして適当に気象データを見立てた連想配列を用意しました。

const weatherData = [
  { "placename" : "東京", "temperature" : {"high" : 24, "low" : 10}, "wind" : "5" },
  { "placename" : "大阪", "temperature" : {"high" : 25, "low" : 12}, "wind" : "1" },
  { "placename" : "福岡", "temperature" : {"high" : 22, "low" : 9}, "wind" : "2" },
];

ひとつのオブジェクトは↓こんなかんじです。みやすいように整形してます。

{ 
  "placename" : "東京",
  "temperature" : {
    "high" : 24,
    "low" : 10
  }, 
  "wind" : "5" 
},

この連想配列を使って、別の連想配列を作ります！

今回は地名と最高気温だけを抽出した連想配列を作ります。

連想配列を再作成

map()メソッドを使います。

const res = weatherData.map(item => {
  const data = {
    name : item['placename'],
    high : item['temperature']['high']
  };
  return data;
});

もっと簡素にもできます。結果は同じです。
アロー関数を使ってそのままオブジェクトを返却するときは( )でオブジェクトを囲うのをお忘れなく。

const res = weatherData.map(item => ({
    name : item['placename'],
    high : item['temperature']['high']
  })
);

結果

console.log(res);

// 結果
[ 
  { name: "東京", high: 24 },
  { name: "大阪", high: 25 },
  { name: "福岡", high: 22 }
]

無事完成しました。

他にもやりようは多くあると思いますが、今回はmap()メソッドを使いました。今後も簡単な作り方を模索していきます〜。

参考

JavaScript map関数を使用して必要な要素のみで配列を生成する | MSeeeeN | 大阪発 IT メディア by MSEN

JavaScriptのアロー関数でオブジェクトを返す方法 | DevelopersIO