使用 javascript 和 json 创建表并使用过滤器列答案

【问题标题】：using javascript and json create a table and use filter column使用 javascript 和 json 创建表并使用过滤器列
【发布时间】：2019-08-03 17:16:16
【问题描述】：

我需要使用 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 文件。

【问题讨论】：

你想用JSON文件做什么？
用好话提出您的问题或疑问。
我必须在表格中显示这些数据，通过在 javascript 中加载这个 users.json 文件。如果你给你的邮件 ID 意味着不共享文件。

标签： javascript json html

【解决方案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>';

【讨论】：