ネストされたループにアイテムを表示するJquery

異なるお客様の商品を展示したいのですが。この趣旨で、私はajax呼び出しを介してデータをフェッチし、その後、一意の顧客ごとにデータをグループ化します。次に、グループ化されたデータをhtmlに追加します。
グループ化されたデータの構造は次のようになります。
"ジョン・ドウ"： [
{{
"Item_id"：1
"Item_name"： "abc"
}、
{{
"Item_id"：2
"Item_name"： "def"
}、
]、
"ジェーン・ドウ"：
{{
"Item_id"：3
"Item_name"： "ghi"
}、
{{
"Item_id"：4
"Item_name"： "jkl"
}、
]
私のコードは次のようになります：
$ .each（groupedData、function（key、value）{
$（ '。cust_items'）。append（ `
 `+キー+` 

`）;
$ .each（value、function（ky、val）{
$（ '＃dataTable tbody'）。append（
`


アイテム番号
アイテム名

 


`+ ky +`


`+ val.Item_name +`


`）;
}）;
}）;
最初の顧客の下にすべてのアイテムが表示され、2番目の顧客の下にデータが正しく表示されるという問題に直面しています。 
                                
                                

                                    

                                        

                                            2021-01-31 08:22:44                                        
                                    
                                
                            


                        
                    


                    

                        

                        

                    

                    

                        

                            
プロパティとJaneDoeプロパティのオブジェクトが[]で囲まれていないため、カンマがありません。構文が正しくないため、groupedDataオブジェクトを変更することを検討してください。
編集：テンプレート文字列を調整し、動的IDでテーブルにアクセスします。
サンプル：
groupedData = {
"ジョン・ドウ"： [{
"Item_id"：1、
"Item_name"： "abc"
}、
{{
"Item_id"：2、
"Item_name"： "def"
}
]、
"ジェーン・ドウ"： [{
"Item_id"：3、
"Item_name"： "ghi"
}、
{{
"Item_id"：4、
"Item_name"： "jkl"
}
]
};
$ .each（groupedData、function（key、value）{
$（ '。cust_items'）。append（ `
 $ {key} 

`）;
$ .each（value、function（ky、val）{
$（ `＃dataTable _ $ {key.split（ ''）。join（ '_'）} tbody`）.append（
`


アイテム番号
アイテム名

 


$ {ky}


$ {val.Item_name}


`）;
}）;
}）;