logo 公式Webサイト

パワフルな
ブログ

取得したJSONの値をオブジェクトとして返す

JavaScriptReact
2024年3月6日

APIから取得したJSONデータをオブジェクトにし、それを別ファイルで使用するという状況が発生したので、まとめさせて頂きます。

また、配列内にあるオブジェクトを返すという認識が曖昧だったので、これを機にしっかりキャッチアップします。

オブジェクト（パース済である前提）の値を各種変数に格納

変数に格納することで、ES6から可能となった、オブジェクトの名称と値が同じなら記載するのはプロパティだけで良いという恩恵を受けることが出来ます。

//JSON形式で受け取ったものをパースしている状態である前提
const obj = {
  "id": 1,
  "name": "taro",
  "age": 25,
  "skill": [
    {
      "skill": "javascript",
      "deadWeek": "1month"
    },
    {
      "skill": "php",
      "deadWeek": "9month"
    },
  ]
};

//各種変数に格納
const id = obj.id;
const name = obj.name;
const age = obj.age;
//skillは配列なので、後ほどmapメソッドで使用します
const skills = obj.skill;

格納した変数をオブジェクトで返す

return { 
  id, 
  name, 
  age, 
  skill: skills.map(skill => ({
　　skillName: skill.skill, 
   deadWeek: skill.deadWeek
  }))
};

返される値

{
  "id": 1,
  "name": "taro",
  "age": 25,
  "skill": [
    {
      "skillName": "javascript",
      "deadWeek": "1month"
    },
    {
      "skillName": "php",
      "deadWeek": "9month"
    }
  ]
}

 

上記を使用することで、他のコンポーネントにpropsとして値を渡す際も楽になりました。