REFACTORING: for ... of loops on the client side

Author: christophe-lejeune

app/templates/activity.html

@@ -84,28 +84,27 @@ <h1>{{i18n.i_activity}}</h1>
       type: "GET",
       dataType: "json"
     }).done(function(data) {
-      for (u in data.fullnames) {
-        if (fullnames[data.fullnames[u].user] == null) fullnames[data.fullnames[u].user] = data.fullnames[u].fullname;
+      for (u of data.fullnames) {
+        if (fullnames[u.user] == null) fullnames[u.user] = u.fullname;
       }
       end = new Date(data.end);
       start = new Date(end.setFullYear(end.getFullYear() - 1));
       for (activity in {created,commented,modified}) {
         if (data['n'+activity].length > 0)
-          for (i in data['n'+activity]) {
-            var e = data['n'+activity][i],
-                fullname = e.user;
+          for (e of data['n'+activity]) {
+            var fullname = e.user;
             if (fullnames[e.user] == null) getFullname(e.user);
             if (fullnames[e.user] != null) fullname = fullnames[e.user];
             $('#contributors .'+activity).append(fullname+'&nbsp;('+e.n+') ');
           }
       }
-      for (var i in data.activity) {
-        var date = data.activity[i].date;
+      for (var a of data.activity) {
+        var date = a.date;
         if(date > start.toJSON()) {
           all[moment(date).format('X')] = 1;
-          if (data.activity[i].commented) commented[moment(date).format('X')] = 1;
-          if (data.activity[i].created)     created[moment(date).format('X')] = 1;
-          if (data.activity[i].modified)   modified[moment(date).format('X')] = 1;
+          if (a.commented) commented[moment(date).format('X')] = 1;
+          if (a.created)     created[moment(date).format('X')] = 1;
+          if (a.modified)   modified[moment(date).format('X')] = 1;
         }
       }
     }).done(function() {
@@ -187,9 +186,9 @@ <h1>{{i18n.i_activity}}</h1>
       type: "GET",
       dataType: "json",
       success: function(data) {
-        for (var i in data) {
-          var [date, user, user_fullname, type] = [data[i].date, data[i].user, data[i].user_fullname, data[i].modified_type];
-          if (typeof data[i].commented !== 'undefined') {
+        for (var a of data) {
+          var [date, user, user_fullname, type] = [a.date, a.user, a.user_fullname, a.modified_type];
+          if (typeof a.commented !== 'undefined') {
             action = '{{i18n.i_commented}}&nbsp;: ';
           }
           path = type2path(type);
@@ -198,14 +197,14 @@ <h1>{{i18n.i_activity}}</h1>
           if (typeof user_fullname === 'undefined' && fullnames[user] !== null) user_fullname = fullnames[user];
           if (typeof user_fullname === 'undefined' && fullnames[user] == null) user_fullname = user;
 
-          if (typeof data[i].diary_label !== 'undefined') {
-            if (typeof data[i].created   !== 'undefined') action = '{{i18n.i_created}} {{i18n.i_the-diary}}';
-            if (typeof data[i].modified  !== 'undefined') action = '{{i18n.i_modified}} {{i18n.i_the-diary}}';
+          if (typeof a.diary_label !== 'undefined') {
+            if (typeof a.created   !== 'undefined') action = '{{i18n.i_created}} {{i18n.i_the-diary}}';
+            if (typeof a.modified  !== 'undefined') action = '{{i18n.i_modified}} {{i18n.i_the-diary}}';
           } else {
-            if (typeof data[i].commented !== 'undefined') action = '{{i18n.i_commented}}&nbsp;: ';
-            if (typeof data[i].created   !== 'undefined') action = '{{i18n.i_created}} ';
-            if (typeof data[i].modified  !== 'undefined') action = '{{i18n.i_modified}} ';
-            action += '<a href="../../'+path+'/'+diary_id+'/'+data[i].modified_id+'">'+data[i].modified_name+'</a>';
+            if (typeof a.commented !== 'undefined') action = '{{i18n.i_commented}}&nbsp;: ';
+            if (typeof a.created   !== 'undefined') action = '{{i18n.i_created}} ';
+            if (typeof a.modified  !== 'undefined') action = '{{i18n.i_modified}} ';
+            action += '<a href="../../'+path+'/'+diary_id+'/'+a.modified_id+'">'+a.modified_name+'</a>';
           }
           var li = '<li>'
             +'<span id="'+date+'" class="'+date+' moment"></span>, '

app/templates/diagram.html

@@ -172,9 +172,8 @@ <h5 class="modal-title">{{i18n.i_link}}</h5>
       type: "GET",
       dataType: "json",
         success: function(grounds) {
-        for (var i in grounds.rows) {
-          var r = grounds.rows[i],
-              id = r.value['id'],
+        for (var r of grounds.rows) {
+          var id = r.value['id'],
               ground_href = r.value['id'];
               ground_label = r.value['name'];
           if ($('#groundings>li').length < 2 && document.getElementById(id) == null && ground_href != "{{_id}}") {

app/templates/diaries.html

@@ -80,10 +80,10 @@ <h5 class="card-title">{{i18n.i_create.diary}}</h5>
     }).done(function(data) {
         if(data.fullname.length == 0) $('#storing_fullname_dialog').modal('show');
         if(data.fullname) $('#username').text(data.fullname);
-        for (var o in data.order) {
-          if (typeof data.order[o].collection !== 'undefined') {
-            let collection = data.order[o].collection,
-                diary = data.order[o].diary;
+        for (var o of data.order) {
+          if (typeof o.collection !== 'undefined') {
+            let collection = o.collection,
+                diary = o.diary;
             if (document.getElementById(collection) == null) $("#content").append("<h3 class='collection d-none'>"+collection+"</h3><div id='"+collection+"' class='card-columns'></div>");
             if (document.getElementById(diary) !== null) {
               $('#'+collection).append($('#'+diary).parent().parent());
@@ -100,12 +100,12 @@ <h5 class="card-title">{{i18n.i_create.diary}}</h5>
       type: "GET",
       dataType: "json",
       success: function(data) {
-        for (var i in data) {
-          let id = data[i].id;
+        for (var d of data) {
+          let id = d.id;
           if (!$('#'+id).length) {
             var card = '<div class="card text-center bg-light mb-3">'
               +'<div title="{{i18n.i_integrate}} {{i18n.i_in}} {{i18n.i_collection}}" class="in-collection d-none"><img src="../style/chevron-down.svg" alt="v" /></div>'
-              +'<h5><a href="../memo/'+id+'/">'+data[i].name+'</a></h5>'
+              +'<h5><a href="../memo/'+id+'/">'+d.name+'</a></h5>'
               +'<div title="{{i18n.i_restricted-access}}" class="card-icons"><img src="../style/lock.svg" alt="" /></div>'
               +'<p><span id="'+id+'" title="{{i18n.i_memos}}" class="badge badge-pill badge-secondary progress-bar-striped progress-bar-animated d-none">{{i18n.i_loading}}</span></p>'
               +'</div>';
@@ -114,7 +114,7 @@ <h5 class="card-title">{{i18n.i_create.diary}}</h5>
             } else {
               $('#loading').after(card);
             }
-            added.push(data[i].id);
+            added.push(d.id);
           }
         }
       }
@@ -147,18 +147,18 @@ <h5 class="card-title">{{i18n.i_create.diary}}</h5>
       type: "GET",
       dataType: "json",
       success: function(data) {
-        for (var i in data) {
-          $('#'+data[i].id).text(data[i].size);
-          if (data[i].news) {
-            $('#'+data[i].id).prepend(data[i].news+' / ');
-            $('#'+data[i].id).parent().parent().removeClass('bg-light');
-            $('#'+data[i].id).parent().parent().addClass('alert-success');
-            $('#'+data[i].id).parent().parent().attr("title", "{{i18n.i_updated-diary}}");
-            $('#'+data[i].id).removeClass('badge-secondary');
-            $('#'+data[i].id).addClass('badge-success');
-            $('#'+data[i].id).attr("title", "{{i18n.i_memos-number}}");
-            if (typeof data[i].lastvisit !== 'undefined')
-              $("<br/><span class='moment'>{{i18n.i_last-visit}} "+moment(data[i].lastvisit).fromNow()+'</span>').insertAfter('#'+data[i].id);
+        for (var n of data) {
+          $('#'+n.id).text(n.size);
+          if (n.news) {
+            $('#'+n.id).prepend(n.news+' / ');
+            $('#'+n.id).parent().parent().removeClass('bg-light');
+            $('#'+n.id).parent().parent().addClass('alert-success');
+            $('#'+n.id).parent().parent().attr("title", "{{i18n.i_updated-diary}}");
+            $('#'+n.id).removeClass('badge-secondary');
+            $('#'+n.id).addClass('badge-success');
+            $('#'+n.id).attr("title", "{{i18n.i_memos-number}}");
+            if (typeof n.lastvisit !== 'undefined')
+              $("<br/><span class='moment'>{{i18n.i_last-visit}} "+moment(n.lastvisit).fromNow()+'</span>').insertAfter('#'+n.id);
           }
         }
       }

app/templates/diary.html

@@ -296,22 +296,22 @@ <h1> <span id="size" class="badge badge-pill" title="{{i18n.i_memos}}"></span></
   };
 
   function showList(data) {
-    for (var i in data) {
-      if(document.getElementById(data[i].id) == null) {
+    for (var m of data) {
+      if(document.getElementById(m.id) == null) {
         var unread = 'unread';
-        var date = data[i].date;
-        if('{{by}}' == 'update') date = data[i].update;
-        var sort_key = data[i].sortkey;
-        var j = activity.findIndex(e => e.doc === data[i].id);
-        if (j > -1 && activity[j].date > data[i].update) unread = '';
-        var checkbox = '<input type="checkbox" id="'+data[i].id+'" name="'+data[i].rev+'" class="hidden deletable" />';
-        if (data[i].rev == 'statement') checkbox = '<input type="checkbox" class="hidden" disabled />';
-        var li = '<li class="'+data[i].type+'" name="'+sort_key+'">' + checkbox
-          +' <span id="'+data[i].id+'" name="'+data[i].update+'" class="'+date+' moment '+unread+'"></span>&nbsp;– '
+        var date = m.date;
+        if('{{by}}' == 'update') date = m.update;
+        var sort_key = m.sortkey;
+        var j = activity.findIndex(e => e.doc === m.id);
+        if (j > -1 && activity[j].date > m.update) unread = '';
+        var checkbox = '<input type="checkbox" id="'+m.id+'" name="'+m.rev+'" class="hidden deletable" />';
+        if (m.rev == 'statement') checkbox = '<input type="checkbox" class="hidden" disabled />';
+        var li = '<li class="'+m.type+'" name="'+sort_key+'">' + checkbox
+          +' <span id="'+m.id+'" name="'+m.update+'" class="'+date+' moment '+unread+'"></span>&nbsp;– '
           +'<span class="mytooltip">'
-          +'<a href="../../'+data[i].path+'/'+data[i].diary+'/'+data[i].id+'" class="'+unread+'">'+data[i].name+'</a>';
-        if (typeof data[i].preview !== 'undefined' && data[i].preview.trim().length > 0)
-          li += '<span class="preview text-{{>contrastcolor}} bg-{{>menucolor}}">'+data[i].preview+'</span>';
+          +'<a href="../../'+m.path+'/'+m.diary+'/'+m.id+'" class="'+unread+'">'+m.name+'</a>';
+        if (typeof m.preview !== 'undefined' && m.preview.trim().length > 0)
+          li += '<span class="preview text-{{>contrastcolor}} bg-{{>menucolor}}">'+m.preview+'</span>';
         li += '</span></li>';
         $("#memos").append(li);
       }

app/templates/graph.html

@@ -281,15 +281,15 @@ <h1> <img title="{{i18n.i_memo.graph}}" src="../../style/{{type}}.svg"/> {{name}
     destroyGraphViz();
     var viz = new Viz(),
         graphviz = 'graph "{{name}}" {overlap=false; graph [fontname = "helvetica"]; node [fontname = "helvetica" style="filled" fillcolor="white"]; edge [fontname = "helvetica"];';
-    for (var i in nodes) {
-      graphviz += 'node'+nodes[i].id + '[label="' + nodes[i].label.replace(/['"]/g, '\'').replace(/\n/g, '\\n') + '", shape='+nodes[i].shape+']; ';
+    for (var n of nodes) {
+      graphviz += 'node'+n.id + '[label="' + n.label.replace(/['"]/g, '\'').replace(/\n/g, '\\n') + '", shape='+n.shape+']; ';
     }
-    for (var i in edges) {
-      if (nodes.findIndex(x => x.id === edges[i].to) > -1 && nodes.findIndex(x => x.id === edges[i].from) > -1) {
-        if (edges[i].dashes == null) {
-          graphviz += 'node'+edges[i].from + ' -- ' + 'node'+edges[i].to + '[color=' +edges[i].color+ ']; ';
+    for (var e of edges) {
+      if (nodes.findIndex(x => x.id === e.to) > -1 && nodes.findIndex(x => x.id === e.from) > -1) {
+        if (e.dashes == null) {
+          graphviz += 'node'+e.from + ' -- ' + 'node'+e.to + '[color=' +e.color+ ']; ';
         } else {
-          graphviz += 'node'+edges[i].from + ' -- ' + 'node'+edges[i].to + '[style=dashed,color='+edges[i].color+',label="' +edges[i].label.replace(/['"]/g, '\'').replace(/\n/g, '\\n')+ '"]; ';
+          graphviz += 'node'+e.from + ' -- ' + 'node'+e.to + '[style=dashed,color='+e.color+',label="' +e.label.replace(/['"]/g, '\'').replace(/\n/g, '\\n')+ '"]; ';
         }
       }
     }

app/templates/memo.html

@@ -387,8 +387,7 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
         dataType: "json",
         success: function(lexcorpus) {
           var corpus = {};
-          for (var i in lexcorpus.rows) {
-            var c = lexcorpus.rows[i];
+          for (var c of lexcorpus.rows) {
             corpus[c.key[1]] = c.value;
           }
           $.ajax({
@@ -397,10 +396,9 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
             dataType: "json",
             success: function(lexdoc) {
               var max_specific = 0;
-              for (var j in lexdoc.rows) {
-                var d = lexdoc.rows[j];
-                var word = d.key[1];
-                var inCorpus = corpus[word];
+              for (var d of lexdoc.rows) {
+                var word = d.key[1],
+                    inCorpus = corpus[word];
                 metrics[word] = {
                   rare: 1/inCorpus.sum,
                   specific: Math.sqrt(d.value)/inCorpus.count,
@@ -422,8 +420,7 @@ <h1><img src="{{>relpath}}style/{{type}}.svg"/> {{name}}</h1>
         type: "GET",
         dataType: "json",
         success: function(phrases) {
-          for (var l in phrases.rows) {
-            var r = phrases.rows[l];
+          for (var r of phrases.rows) {
             trigrams[[r.key[1], r.key[2], r.key[3]]] = r.value;
           }
           $('#repeated').removeClass('disabled');

app/templates/network.html

@@ -166,8 +166,7 @@ <h1>{{i18n.i_timeline}}</h1>
     graphviz += theoretical + '}}' + operational + '}'+ field + '}' + coding + '}}' + diagram + '}'+ storyline + '}';
     graphviz += '1->2->3->4->5->6 [style = invis]';
 
-    for (var i in edges) {
-      var e = edges[i];
+    for (var [i, e] of Object.entries(edges)) {
       var f = e;
       var j = surrenders.map(x => x.original).indexOf(e.from);
       if (j > -1) {
@@ -180,8 +179,7 @@ <h1>{{i18n.i_timeline}}</h1>
         edges.splice(i, 1, f);
       }
     }
-    for (var i in edges) {
-      var e = edges[i];
+    for (var [i, e] of Object.entries(edges)) {
       if (edges.map(x => x.from+x.to).indexOf(e.from+e.to) == i && e.from != e.to) {
         graphviz += 'node'+e.from+' -> node'+e.to+' [color='+e.color+', constraint=false];';
       }

app/templates/table.html

@@ -250,11 +250,11 @@ <h1> <img title="{{i18n.i_memo.table}}" src="../../style/{{type}}.svg"/> {{name}
         {'color':'red', 'value': false, 'text': "{{i18n.i_false}}" },
         {'color':'', 'value': '...', 'text': "{{i18n.i_undef}}" }
       ];
-      for (i in colors) {
+      for (c of colors) {
         var selected = false;
-        if (selected_color == colors[i].color) selected = true ;
+        if (selected_color == c.color) selected = true ;
         $(this).find('select').append(
-          $('<option>', { value: selected_cell+colors[i].value, text: colors[i].text, class:colors[i].color, selected: selected })
+          $('<option>', { value: selected_cell+c.value, text: c.text, class:c.color, selected: selected })
         );
       }
   });

app/templates/todo.html

@@ -103,10 +103,10 @@ <h2 id='ungrounded' class="hidden">{{i18n.i_ungrounded}}</h2>
         $('title').prepend(d.diary_name);
         nComments = d.comments.length;
         var data = d.comments;
-        for (var i in data) {
+        for (var c of data) {
           payload += "<li class='unchecked-comment'>"
-            +'<span class="'+data[i].date+' moment"></span>&nbsp;– '
-            +"<a href='../../"+data[i].type+"/"+data[i].diary+"/"+data[i].id+"'>"+data[i].name+"</a>"
+            +'<span class="'+c.date+' moment"></span>&nbsp;– '
+            +"<a href='../../"+c.type+"/"+c.diary+"/"+c.id+"'>"+c.name+"</a>"
             +'</li>';
         }
       }