используя javascript и json создайте таблицу и используйте столбец фильтра

Question

Мне нужен вывод с использованием javascript и html, json.

[
  {
    "name": "Tamil Mani",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 98
      },
      {
        "sub": "English",
        "mark": 65
      },
      {
        "sub": "Maths",
        "mark": 88
      }
    ]
  },
  {
    "name": "Amuthan",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 79
      },
      {
        "sub": "Maths",
        "mark": 79
      }
    ]
  },
  {
    "name": "Mugilan",
    "year": 1,
    "gender": "m",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 97
      },
      {
        "sub": "English",
        "mark": 89
      },
      {
        "sub": "Maths",
        "mark": 99
      }
    ]
  },
  {
    "name": "Tamil Oviya",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 87
      },
      {
        "sub": "Maths",
        "mark": 97
      }
    ]
  },
  {
    "name": "Amutha",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 89
      },
      {
        "sub": "English",
        "mark": 69
      },
      {
        "sub": "Maths",
        "mark": 79
      }
    ]
  },
  {
    "name": "Mugil Mathi",
    "year": 1,
    "gender": "f",
    "marks": [
      {
        "sub": "Tamil",
        "mark": 97
      },
      {
        "sub": "English",
        "mark": 89
      },
      {
        "sub": "Maths",
        "mark": 99
      }
    ]
  }
]

это файл json.

Answer 1

Если у вас есть объект JSON, вы можете просмотреть его, чтобы создать то, что вам нужно.Я не напишу это на вашем примере, но на упрощенном, чтобы вы могли учиться на практике, а не просто копировать и вставлять.Надеюсь, это поможет.

var people = [
    {
        name: "Adam"
    },
    {
        name: "Betty"
    },
    {
        name: "Charles"
    }
];

var html = people.reduce((accum, person) => {
    return accum + `<tr><td>${person.name}</td></tr>`;
}, '<table>') + '</table>';

// or if you're used to imperitive...
var html = '<table>';
people.forEach(person => {
    html += `<tr><td>${person.name}</td></tr>`;
});
html += '</table>';