Javascript:遍历对象数组以查找键值对并将它们呈现在表中 td

Javascript: loop through array of objects to find key value pair and render them in the table td

本文关键字：td 对象 遍历 数组 键值对 查找 Javascript      更新时间：2023-09-26

这是动态创建的下表代码，我想获取存储在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"id 和值。但是正在发生的事情是，只有第一个TD使用数组中"new_value"的所有值进行更新，其余TD被渲染为空白。我想以这样一种方式显示，它将遍历数组并找到与"new_value"对象关联的键值对，并为各自的 td 呈现这两个值。

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

我怎样才能做到这一点？谢谢！

由于元素的 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>

相关文章：