Json вложенные данные Loop

Question

У меня есть список объектов массива JSON объект, я пытаюсь сделать цикл, но я не мог opbject все еще пуст, я пытаюсь использовать вложенную карту для рендеринга данных, это правильно, пожалуйста, мне нужна помощь для рендеринга этого объекта, три вложенных массива или, может быть, более или менее

let d= [
    [
     
      {
         "suit":"♥︎",
         "val":"Q"
      },
      
      {
         "suit":"♠︎",
         "val":"9"
      },
      {
         "suit":"♣︎",
         "val":"6"
      },
      {
         "suit":"♣︎",
         "val":"1"
      },
      {
         "suit":"♠︎",
         "val":"4"
      },
      {
         "suit":"♣︎",
         "val":"2"
      }],
    [
    
      {
         "suit":"♦︎",
         "val":"3"
      },
      {
         "suit":"♥︎",
         "val":"2"
      },
     
      {
         "suit":"♠︎",
         "val":"5"
      }],[
      {
         "suit":"♠︎",
         "val":"2"
      },
      {
         "suit":"♦︎",
         "val":"5"
      },
     
      {
         "suit":"♠︎",
         "val":"3"
      }]];

Answer 1

1001 * попробовать *

let d=[[{"suit":"♥︎","val":"Q"},{"suit":"♠︎","val":"9"},{"suit":"♣︎","val":"6"},
  {"suit":"♣︎","val":"1"},{"suit":"♠︎","val":"4"},{"suit":"♣︎","val":"2"}],
  [{"suit":"♦︎","val":"3"},{"suit":"♥︎","val":"2"},{"suit":"♠︎","val":"5"}],
  [{"suit":"♠︎","val":"2"},{"suit":"♦︎","val":"5"},{"suit":"♠︎","val":"3"}]];

let s= d.map(x=>`<p>${x.map(y=>`<span>${y.val+y.suit}</span>`).join('')}</p>`)

document.body.innerHTML+=s.join('')

span { margin-left: 20px;}