JS（Vue）数据处理实战（一）

最新推荐文章于 2023-11-23 10:50:59 发布

张兴华(MarsXH.Chang)

最新推荐文章于 2023-11-23 10:50:59 发布

阅读量611

点赞数

分类专栏： vue js 文章标签： vue js 数据处理实战练习

本文链接：https://blog.csdn.net/q95548854/article/details/95625522

版权

vue 同时被 2 个专栏收录

62 篇文章 10 订阅

订阅专栏

38 篇文章 1 订阅

订阅专栏

有如下需求：

将数据通过表格展示。

数据：

issuesSummary = {
  Answered: {
    Medium: [
      {id: "60030011"},
      {id: "60030012"},
      {id: "60030013"},
      {id: "60030014"},
      {id: "60030015"}
    ],
    Low: [
      {id: "60030021"},
      {id: "60030022"},
      {id: "60030023"},
      {id: "60030024"}
    ],
  },
  Closed: {
    High: [
      {id: "70030011"},
      {id: "70030012"},
      {id: "70030013"},
      {id: "70030014"},
      {id: "70030015"},
      {id: "70030016"}
    ]
  },
  Fixed: {
    Medium: [
      {id: "80030011"},
      {id: "80030012"},
      {id: "80030013"}
    ],
    Highest: [
      {id: "80030021"}
    ],
    Low: [
      {id: "80030031"},
      {id: "80030032"}
    ]
  }
}

表格：

在这里插入图片描述
规则如下：

计算各个种类的各个等级个数
数据中没有的为 0

使用 html + js 编写模板：

新建一个 topic1.html，将下列代码复制到其中：

<html>
	<head>
		<title>js数据处理实战（一）</title>
	</head>
	<body>
    <table border="1" width="50%" id="table">
      <tr>
        <th>Description</th>
        <th>Highest</th>
        <th>High</th>
        <th>Medium</th>
        <th>Low</th>
        <th>Total</th>
      </tr>
    </table>

    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script>
      // 已有数据
      let issuesSummary = {
        Answered: {
          Medium: [
            {id: "60030011"},
            {id: "60030012"},
            {id: "60030013"},
            {id: "60030014"},
            {id: "60030015"}
          ],
          Low: [
            {id: "60030021"},
            {id: "60030022"},
            {id: "60030023"},
            {id: "60030024"}
          ],
        },
        Closed: {
          High: [
            {id: "70030011"},
            {id: "70030012"},
            {id: "70030013"},
            {id: "70030014"},
            {id: "70030015"},
            {id: "70030016"}
          ]
        },
        Fixed: {
          Medium: [
            {id: "80030011"},
            {id: "80030012"},
            {id: "80030013"}
          ],
          Highest: [
            {id: "80030021"}
          ],
          Low: [
            {id: "80030031"},
            {id: "80030032"}
          ]
        }
      }
      disposeData()
      function disposeData () {
        const dataList = []
        // 这里写处理数据的代码
        
        // 添加到页面
        addTable(dataList)
      }

      function addTable (list) {
        list.forEach(item => {
          addLine(item.Description, item.Highest, item.High, item.Medium, item.Low, item.Total)
        });
      }

      function addLine (Description, Highest, High, Medium, Low, Total) {
        let tr = document.createElement("tr");
        let str = '<td>' + Description + '</td>';
        str += '<td>' + Highest + '</td>';
        str += '<td>' + High + '</td>';
        str += '<td>' + Medium + '</td>';
        str += '<td>' + Low + '</td>';
        str += '<td>' + Total + '</td>';
        tr.innerHTML = str;
        let tab = document.getElementById("table");
        tab.appendChild(tr);
      }

    </script>
	</body>
</html>

Vue模式编写

在线编辑地址：点我

张兴华(MarsXH.Chang)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS（Vue）数据处理实战（一）

有如下需求：将数据通过表格展示。数据：issuesSummary = { Answered: { Medium: [ {id: "60030011"}, {id: "60030012"}, {id: "60030013"}, {id: "60030014"}, {id: "60030015"} ], ...
复制链接

扫一扫