Как отфильтровать таблицу, найти соответствующую запись в данных JSON и добавить соответствующую ссылку

Question

Я бы хотел отфильтровать второй столбец моей таблицы, найти соответствующую запись в моих «профилях» и использовать 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>

Answer 1

Вы можете использовать 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>

Answer 2

https://jsfiddle.net/wer4mfuv/

Часть HTML:

<table id="myTable">
    <thead>
        <tr>
            <th>#</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Susie</td>
        </tr>
    <tr>
            <td>15</td>
            <td>TEST1</td>
        </tr>
        <tr>
            <td>2</td>
            <td>John</td>
        </tr>
    <tr>
            <td>3</td>
            <td>Test</td>
        </tr>
</tbody>

JavaScript:

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

var trs = document.querySelectorAll("#myTable tbody tr");
Array.from(trs).forEach(a => {
    var trname = a.children[1].innerText;
    var search = profiles.find(x => x.name == trname);
    if (search != null) {
        a.children[1].innerHTML = '<a href="' + profiles.find(x => x.name == trname).link + '">' + trname + '</a>';
        a.style.display = "";
    } else {
        a.style.display = "none";
    }
  });

Answer 3

Просто используйте jQuery (я полагаю, вы согласны с этим?), Чтобы добавлять записи динамически.Кроме того, не используйте таблицы.Вы должны использовать <div> s в сочетании с flexbox.Смотрите пример:

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

$(document).ready(function() {
  for (var i = 0; i < profiles.length; i++) {
    var html = '<div>';
    html += '<div>' + profiles[i].name + '</div>';
    html += '<div><a href="' + profiles[i].link + '" target="_blank">Link</a></div>';
    html += '</div>';
    $("#people").append(html);
  }
});

#people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
}

#people>div>div {
flex: 1;
padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div>

Другой, еще более современный подход заключается в том, чтобы полностью избавиться от лишнего столбца и сделать весь ряд кликабельным:

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

$(document).ready(function() {
  $("#people").on("click", ">div", function() {
    //window.location.href = $(this).data('url');
    console.log("Going to: " + $(this).data('url'));
  });

  for (var i = 0; i < profiles.length; i++) {
    var html = '<div data-url="' + profiles[i].link + '">';
    html += '<div>' + profiles[i].name + '</div>';
    html += '<div>Some other use data...</div>';
    html += '</div>';
    $("#people").append(html);
  }
});

#people {
  display: flex;
  flex-direction: column;
}

#people>div {
  display: flex;
  border-bottom: 1px solid black;
  cursor: pointer;
  transition: 0.3s ease-in-out;
}

#people>div:hover {
  background-color: black;
  color: white;
}

#people>div>div {
  flex: 1;
  padding: 0.5em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<h1>People</h1>
<div id="people"></div>

Answer 4

Вот решение, которое предоставляет вам решение вашего запроса.

var profiles = [
  {"name": "Susie", "link": "www.google.com"},
  {"name": "John", "link": "www.yahoo.com"}
];
var getTableRows = document.querySelectorAll("tbody tr");
var totalRows = getTableRows.length;
var i = 0;
while (i < totalRows) {
    let name = getTableRows[i].childNodes[1].innerHTML;
    for(let j=0; j<profiles.length; j++){
        if(profiles[j].name === name){
            getTableRows[i].childNodes[1].innerHTML = "<a href=" + profiles[j].link + ">" + name + "</a>";
        }
    }
    i++;
}

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