JavaScriptを使用してネストになった配列のkey要素の名前を変更したい。

Question

下記のような連想配列において、"task:[{}]"の"tid"を"id"に、"tname"を"name"に変更したいと思っております。

const test = [
  {id:1,name:"John",task:[{tid:2,tname:"test"},{tid:3,tname:"test"}]},
  {id:4,name:"Bob",task:[{tid:5,tname:"test"},{tid:6,tname:"test"}]},
]

mapメソッドを使用すればうまくいくのではと思い、
下記のようなコードを作成しました。

const changeTname = test.map((item:any)=>{
  item.task.tid = 'id'
  item.task.tname = 'name'
})
console.log(changeTname)

しかし実行結果は、undefinedとなってしまいました。

[undefined,undefined]

想定しているoutputとしては、下記のようなoutputを想定しております。

const test = [
  {id:1,name:"John",task:[{id:2,name:"test"},{id:3,name:"test"}]},
  {id:4,name:"Bob",task:[{id:5,name:"test"},{id:6,name:"test"}]},
]

どなたかご教示いただけませんでしょうか？

Answer 1

mapを使う場合は何かしらreturnする必要があります。
また、プロパティ名そのものを変更する場合は、別途新しいオブジェクトを作るといいと思います。

const test = [
  {id:1,name:"John",task:[{tid:2,tname:"test"},{tid:3,tname:"test"}]},
  {id:4,name:"Bob",task:[{tid:5,tname:"test"},{tid:6,tname:"test"}]},
];

const changeTname = test.map((item)=>{
  item.task.tid = 'id'
  item.task.tname = 'name'
  
  const newTasks = item.task.map((task) => {
    return { id: task.tid, name: task.tname }
  });

  return ({
    id: item.id,
    name: item.name,
    task: newTasks
  });
});

console.log(changeTname)

Comments

[takochan1192]

nekoniki様
非常に勉強になりました。新しいオブジェクトを返すのですね。自分の未熟さを実感致しました。
ご回答ありがとうございました。