jsまたはjqueryを使用して配列を繰り返し、htmlに追加する方が良い

Question

{key：[array]、key2：[array]}を含む配列をより短く/より良い方法で処理するかどうかは疑問です。

現時点で

var ray = {'A':['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 
'B': ['m', 'n', 'b', 'v', 'c', 'x', 'z'], 
'C': ['o', 'i', 'd', 'f', 'j', 'a', 'l', 'a', 'd'] 
} 

私は

が過度に重複せずにこれを行うには良い方法がある

function(data) { 
     var ray = data.result; 
     $.each(ray, function() { 
      if(this == ray.A){ 
      $.each(this, function(i, v) { 
       $("#list1").append('<span class="tag">' + v + "</span>"); 
      }); 
      } 
      if(this == ray.B){ 
      $.each(this, function(i, v) { 
       $("#list2").append('<span class="tag2">' + v + "</span>"); 
      }); 
      } 

     }); 
    } 

など。持っていますか？

Answer 1

、一般的に次のようにあなたが行うことができます...

Object.keys(ray).forEach(k => ray[k].forEach(e => doSomethingWith(k,e))) 

Answer 2

listに同じ名前が付いているので、ループで$("#list"+j).appendを使用してください。あなたのデータ型を1として

var ray = {'A':['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i'], 
 
'B': ['m', 'n', 'b', 'v', 'c', 'x', 'z'], 
 
'C': ['o', 'i', 'd', 'f', 'j', 'a', 'l', 'a', 'd'] 
 
} 
 
    function arr() { 
 
     var j=0; 
 
     $.each(ray, function() { 
 
      j++; 
 
      $.each(this, function(i, v) { 
 
       $("#list"+j).append('<span class="tag">' + v + "</span>"); 
 
      }); 
 
     }); 
 
    } 
 
    
 
    arr();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="list1"> 
 
</div> 
 
<div id="list2"> 
 
</div> 
 
<div id="list3"> 
 
</div>