Как напечатать JSON в таблице html

Question

У меня есть json, который я хочу напечатать в html таблице. Я просто не знаю, как напечатать это JSON.

Я пробовал эти данные ['videos'], но ничего не приходит и это тоже data.videos

{
  "videos": [
    {
      "title": "Martin Garrix feat. Bonn - No Sleep (Official Video)",
      "link": "/watch?v=JxzKNHfNRdI",
      "id": "JxzKNHfNRdI"
    },
    {
      "title": "Wiz Khalifa - No Sleep [Music Video]",
      "link": "/watch?v=KuVAeTHqijk",
      "id": "KuVAeTHqijk"
    },
    {
      "title": "Martin Garrix - No Sleep ft. Bonn (Lyrics)",
      "link": "/watch?v=c3uxLHn3-JQ",
      "id": "c3uxLHn3-JQ"
    },
    {
      "title": "Wiz Khalifa - No Sleep (D33pSoul Remix)",
      "link": "/watch?v=g5Yv00RsCe8",
      "id": "g5Yv00RsCe8"
    },
    {
      "title": "Wiz Khalifa - No Sleep [LYRICS ON SCREEN]",
      "link": "/watch?v=xkLzpRA5W_E",
      "id": "xkLzpRA5W_E"
    }
  ]
}

Как сделать Я печатаю таблицу в HTML (используя javascript). эти данные находятся в переменной data.

Answer 1

Сначала необходимо определить table в вашем html.

В javascript вы можете извлечь этот элемент html, используя querySelector('table').

Затем вы можете использовать insertRow и insertCell для добавления элементов в таблицу.

const data = {
  "videos": [
    { "title": "Martin Garrix feat. Bonn - No Sleep (Official Video)", "link": "/watch?v=JxzKNHfNRdI", "id": "JxzKNHfNRdI" },
    { "title": "Wiz Khalifa - No Sleep [Music Video]", "link": "/watch?v=KuVAeTHqijk", "id": "KuVAeTHqijk" },
    { "title": "Martin Garrix - No Sleep ft. Bonn (Lyrics)", "link": "/watch?v=c3uxLHn3-JQ", "id": "c3uxLHn3-JQ" },
    { "title": "Wiz Khalifa - No Sleep (D33pSoul Remix)", "link": "/watch?v=g5Yv00RsCe8", "id": "g5Yv00RsCe8" },
    { "title": "Wiz Khalifa - No Sleep [LYRICS ON SCREEN]", "link": "/watch?v=xkLzpRA5W_E", "id": "xkLzpRA5W_E" }
  ]
}

const table = document.querySelector('table')

for (const video of data.videos) {
  const row = table.insertRow()
  for (const value of Object.values(video)) {
    const cell = row.insertCell()
    cell.innerHTML = value
  }
}

table tr td { padding: 5px; }

<table border=1>
    <tr>
        <th>title</th>
        <th>link</th>
        <th>id</th>
    </tr>
</table>