使用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>';