javascript - 如何在遍历 JSON 时仅附加一次表头

Question

如何在通过 JSON 数组循环(搜索)时只附加一次表头？当我尝试这个时，每次开始搜索表头时都会为每个匹配附加，尽管两个产品属于同一组。

HTML

</select>
Search: <input type="text" name="search" id="search" />
<div id="place"></div>

Java Script

 $.ajaxSetup({ cache: false });

 $('#search').keyup(function(event){
 $('#place').html('');
 if (event.keyCode == 8) {
          $('#place').hide('')
          }else{
          $('#place').show('') 
          }
 $('#state').val('');
 var searchField = $('#search').val();
 var expression = new RegExp(searchField, "i");

循环 JSON

  $.getJSON('product.json', function(result) {
   //LOOP JSON 

TABLE HEAD 只在搜索中出现一次。

  $.each(result, function(key, value){
       //TABLE HEAD this need to apperas only one
       var text = '';
       text +='<table class="table" width="610" cellpadding="3" 
        cellspacing="1" bgcolor="#cccccc">';

       text +='<tr>';
       text +='<th width="20%" bgcolor="#aaaaaa" align="left"><font 
       color="#ffffff">Model</font></th>';
       text +='<th width="25%" bgcolor="#aaaaaa"><font color="#ffffff">CODEC 
       Supported</font></th>';

       text +='</tr>';

       text +='<p style="font-size:15px; font-weight:bold; color:#2773ba; 
       margin-bottom:5px">'+value.brand+'</p>'; 
       // END TABLE HEAD

       //END OF TABLE HEAD -START TABLE BODY

       // TABLE BODY is filling with data from json

      if (value.brand.search(expression) != -1 || 
      value.model.search(expression) != -1 || 
      value.CODECSupported.search(expression) != -1  )
       {

       text += '<tr>'
       text += '<td colspan="9" align="left" bgcolor="#FFFFFF" style="font-
       weight:bold; color:#3399cc">'+value.type+'</td>'
       text += '</tr>'
       text += '<tr>'
       text += '<td bgcolor="#FFFFFF">'+value.model+'</td>'
       text += '<td align="center" 
       bgcolor="#FFFFFF">'+value.CODECSupported+'</td>'
       text += '</tr>'
       text += '</table>'

       $('#place').append(text)


      }


      });   
      });
      });

主体结束

  })

Answer 1

您可以在循环外创建表(只在循环内生成数据)，或者您可以使用一个 bool 值来检查您是否已经完成了一次循环

示例伪代码:

passed = false;
for(i=0;i<10;i++){
    // some code happening
    if(!passed){
        // here add the headers
        passed = true;
    }
    else{
        //do the rest
    }
    // other code happening
}

我建议在循环之外设置表，因为这样会更有效率，因为使用此伪代码，您将对循环的每次迭代进行额外检查。

希望这对您有所帮助!