javascript - 如何过滤表，在json数据中找到匹配的条目并添加相应的链接

我想过滤表的第二列，在我的“配置文件”中找到匹配的条目，并使用attr('href', $(link))将名称设为对应的链接。

我尝试以几种不同的方式进行操作，但似乎无法正常工作。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];

<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>

最佳答案

您可以将each用于tr并使用filter来检查数组中的值，如下所示。

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){

    var link = exist[0].link;

    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
$(document).ready(function(){
$('tr').each(function(index,item){
 var value = $(item).find('td').eq(1).text();
 var exist = profiles.filter(c=>c.name == value);
 if(exist.length > 0){

    var link = exist[0].link;

    $(item).find('td').eq(1).html("<a href='"+ link + "'>" + value + "</a>");
 }
})
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead><th>#</th><th>Name</th>
</thead>
<tbody>
<tr><td>1<td>Susie</td></tr>
<tr><td>2<td>John</td></tr>
</tbody>