ネストになった連想配列の特定の値を探して取り出す方法

タイトルが分かりづらくて大変恐縮なのですが、
やりたいことは下記の連想配列内の"task"に当たる部分の要素"tname"の値が"coding"の
配列を持っているオブジェクトの"name"であるJohnの値を返したいと思っています。

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

自分なりにfilterを使ったりforEachを使ったりして
コードを書いてみたのですが、エラーとなり期待した値を取得することができない状況です。
私が作成したコードは下記です。

TypeScript
1let fileteredTest = test.filter((item:any)=>{
2	let itemSelect = item.task.forEach((e:any)=>{
3    if(e.tname.includes("coding")){
4      e.splice(0,0,{
5        tid:e.tid,
6        tname:e.tname,
7      })
8    }
9  })
10  return item.task[0] === itemSelect
11})
12
13console.log(fileteredTest)

output
1TypeError: e.splice is not a function

TypeScriptを使っているのは、TypeScript Playgroundで動作確認をしているためです。
期待しているアウトプットとしては、コンソール上に

output
1John

と表示させたいと思っています。
なかなかいい方法を見つけることができず非常に困っております。
どなたか詳しい方、ご教示いただけますと幸いです。

miyabi_pudding

2020/12/15 08:58

eには何が入っているかは理解されていますか？また、anyでは、TypeScriptではかなり処理がやりずらくなり、今回のようなケースは増えるので、しっかり、型を定義すべきかと。（今回は、別の原因だが）

takochan1192

2020/12/15 09:03

コメントありがとうございます。 eにはtask内のオブジェクトが入っていると思ってコードを作成しておりました。なるほど、型の部分は最近すっかり逃げ腰になっておりました。 anyにしないよう気を付けます。

miyabi_pudding

2020/12/15 09:15

> eにはtask内のオブジェクトが入っていると思ってそうですか。では、オブジェクトデータ型には、 spliceは使えませんので、別の方法が必要です。 Johnという文字列を出力したい、ってことでしょうか？それとも、該当するオブジェクトを取得したいのでしょうか？

takochan1192

2020/12/15 09:21

ご指摘ありがとうございます。該当するオブジェクトではなく、"John"という文字列を出力したいと思っております。

行動規範の内容に同意します

回答1件

ベストアンサー

typescript
1interface Task {
2  tid: number;
3  tname: string;
4}
5
6interface Account {
7  id: number;
8  name: string;
9  task: Task[];
10}
11
12const test: Account[] = [
13  {id: 1, name: "John", task: [
14    {tid: 2, tname: "coding"},
15    {tid: 3, tname: "test"}
16  ]},
17  {id: 4, name: "Bob", task: [
18    {tid: 5, tname: "hoge"},
19    {tid: 6, tname: "fuga"}
20  ]}
21];
22
23const fileteredTest: string = test.find( account =>
24  account.task.some( task => task.tname === 'coding' )
25).name;
26
27console.log(fileteredTest);

今回の要件であれば、filterよりfindの方が適しているかと。

投稿2020/12/15 09:45

miyabi_pudding

総合スコア9528

takochan1192

2020/12/15 13:43

ご回答いただきありがとうございます。型をつけることで型に合ったメソッドが補完されるため、コードをまねして書かせていただきまして、TypeScriptのありがたみを改めて実感いたしました。 interfaceで型までつけて回答していただき本当にありがとうございます。一点質問をしたいことがあるのですが、 findメソッドの一番最後に.nameとある部分です。なんとなく、findメソッドで返されたオブジェクトの中のnameを絞ってその値を返しているのかな？と思っているのですが、その理解であっているでしょうか？ MDNのページなどを探してもそのような記述がなくて気になっておりました。

takochan1192

2020/12/15 13:44 編集

非常にシンプルな書き方で、勉強になりました。ご教示いただけますと幸いです。