如何在 html 表中打印此 JSON

Question

I have a json that I want to print in html an table. I just don't know how to print this JSON.

I tried this data['videos'] but nothing comes and this as well 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"
    }
  ]
}

How do I print a table in HTML (using javascript). these details are in "data" variable.

Answer 1

You need first to define a table in your html.

In javascript, you can retrieve this html element using querySelector('table') .

Then you can use insertRow and insertCell to add the elements in the table.

 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>