JS将集合按格式补全

前言概述：

要求完成以下的目标：统计一周内的骑行距离，如果没有骑行，显示距离为零；

我们知道，很多时候数据库都只记录有内容的数据，没有内容的数据是不会被记录的，比如说某天没有骑行，系统不会把当天骑行距离为零记录到数据库，这样就产生个问题，前端页面要显示的数据格式如下 ↓↓↓

  周一 周二 周三 周四 周五 周六 周日
距离（km） 20 0 22 25 0 0 40

但是从后端查询到的数据却是 ↓↓↓

  周一 周三 周四 周日
距离（km） 20　 22 25 40

 

辣么，现在的问题就是，缺少了那部分距离为0的数据，页面没法正常显示；这时候就需要我们重新组织数据了；

话不多说，直接上代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>示例</title>
 6     </head>
 7     <body>
 8         <div style="padding:5vw;font-size:2vw;font-family:仿宋;" id="content"></div>
 9         <script>
10             //KEY模板
11             const template = [ "周一", "周二", "周三", "周四", "周五", "周六", "周日"];
12 
13             //后端返回的json
14             let list = [
15                 {"name":"周一","value" : 20}, 
16                 {"name":"周三","value" : 22},
17                 {"name":"周四","value" : 25},
18                 {"name":"周日","value" : 40},
19                 ];
20 
21             //最终结果
22             let _list = [];
23             
24             //循环模板，确保能够按照模板的数量组织数据
25             for (var i = 0; i < template.length; i++) {
26                 let k = template[i];
27                 
28                 //创建一个对象模型
29                 let entity = {"name":"","value":0};
30     
31                 //“倒序”循环已有的数据
32                 for (let j = 0; j < i+1 ; j++) {
33                     let item = list[j];
34                     if (item.name === k) {
35                         //如果模板中的KEY跟当前对象的KEY一致，则添加该对象到空集合
36                         _list.push(item);
37                         list.splice(j,1);//从集合中删除当前对象
38                     }else{
39                         //如果模板中的KEY跟当前对象的KEY不一致，设置对象模型的KEY为模板的KEY，设置值为0，添加到空集合
40                         entity.name = k;
41                         entity.value = 0;
42                         _list.push(entity);
43                     }
44                     break;//确保循环只进行一次
45                 }    
46             }
47 
48             document.getElementById("content").innerText = JSON.stringify(_list);
49             console.log(_list);
50         </script>
51     </body>
52 </html>

 

复制以上代码，保存为HTML文件；在浏览器打开，就可以看到我们想到的数据。

 

posted @ 2020-11-25 17:28  大瘦猴  阅读(143)  评论(0)  编辑  收藏  举报