Javascript：通過對象數組循環查找鍵值對並將它們呈現在表中td

Question

以下是動態創建的表代碼，我想獲取存儲在TD中的最後2個值。最後的td值是「鍵 - 值對」的形式。 我要像下面顯示的東西：

<tbody> 
    {{#items}} 
      <tr> 
       <td>{{name}}</td> 
       <td>{{description}}</td> 
       <td id="newval">{{new_value}}</td> 
       <td id="oldval">{{old_value}}</td> 
      </tr>  
    {{/items}} 
</tbody> 

這裏是從服務器獲取的JSON：

{ 
    "result":"OK", 
    "items":[ 
     { 
     "name":"abc", 
     "description":"desc", 
     "new_value":{ 
      "description":"newvalue" 
     }, 
     "old_value":{ 
      "description":"oldvalue " 
     } 
     }, 
     { 
     "name":"abc3", 
     "description":"desc2", 
     "new_value":{ 
      "interval":"newvalue2" 
     }, 
     "old_value":{ 
      "interval":"oldvalue2 " 
     } 
     } 
    ] 
} 

這裏是JS：

$.each(lists,function(i,items){ 
      for (var key in items) { 
      if(key == 'new_value'){ 
       for(value in items[key]){ 
      $("td#newval").html(value + " : " +items[key][value]); 
       } 
      } 
      } 
     }); 

同樣地，我正在做對於舊值，只需替換「td」標識和值。 但是發生的事情只是第一個td在數組中使用「new_value」的所有值進行更新，其餘的td都呈現爲空白。 我想要以這樣的方式顯示它將遍歷數組並找到與「new_value」對象關聯的鍵值對，併爲相應的td呈現兩個值。

<td>description: newvalue</td> 
<td>interval: newvalue2</td> 

我該如何做到這一點？ 謝謝！

Answer 1

由於元素的ID必須是唯一的，因此您應該使用其他一些屬性來對元素進行分組。

這裏一個可能的方法是使用一個類和數據屬性來指定屬性映射到一個場等的元件的

var data = { 
 
    "result": "OK", 
 
    "items": [{ 
 
    "name": "abc", 
 
    "description": "desc", 
 
    "new_value": { 
 
     "description": "newvalue" 
 
    }, 
 
    "old_value": { 
 
     "description": "oldvalue " 
 
    } 
 
    }, { 
 
    "name": "abc3", 
 
    "description": "desc2", 
 
    "new_value": { 
 
     "interval": "newvalue2" 
 
    }, 
 
    "old_value": { 
 
     "interval": "oldvalue2 " 
 
    } 
 
    }] 
 
}; 
 
var trmap = {}; 
 
$('table tr').each(function() { 
 
    trmap[$(this).children(':first-child').text().trim()] = this; 
 
}); 
 

 
$.each(data.items, function(i, item) { 
 
    if (trmap[item.name]) { 
 
    var $tr = $(trmap[item.name]); 
 
    $tr.find('.val').text(function() { 
 
     var key = $(this).data('key'); 
 
     var arr = []; 
 
     $.each(item[key], function(key, value) { 
 
     arr.push(key + ': ' + value) 
 
     }); 
 
     return arr.join(''); 
 
    }); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>abc</td> 
 
     <td>desc</td> 
 
     <td class="val" data-key="new_value">key: newvalue</td> 
 
     <td class="val" data-key="old_value">key: oldvalue</td> 
 
    </tr> 
 
    <tr> 
 
     <td>abc3</td> 
 
     <td>desc2</td> 
 
     <td class="val" data-key="new_value">key: newvalue2</td> 
 
     <td class="val" data-key="old_value">key: oldvalue2</td> 
 
    </tr> 
 
    </tbody> 
 
</table>