Use JQuery to add a link from array objects

Question

I have some python pulling data from Postgres, my HTML is iterating through the content and adding it to a table.

<tbody id="myTable">
   {% for item in content %}
          <tr>
            <td class ="playerLink">{{ item[0] }}</td>
            <td>{{ item[1] }}</td>
            <td>{{ item[2] }}</td>
            <td>{{ item[3] }}</td>
            <td>{{ item[5] }}</td>  
            <td class ="linkId"></td>               
          </tr>
   {% endfor %}

In playerLink I have an ID, 0,1,2,3, etc. What I am trying to do is use JQuery to append a link to linkId that is /destination/1/, /destination/2, etc. I have a funtion to search the table, then another that pulls the ID from the appropriate playerLink.

<script>
    $(document).ready(function(){
      $("#myInput").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("#myTable tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });

    var id = [];
    $('#mytable tr').each(function() {
        var customerId = $(this).find(".playerLink").html();
        console.log(customerId)
        id.push(customerId);
        console.log(id);
          
    $('<a>',{
      text: customerId,
      href:'/playeroverview/' + customerId}
      ).appendTo('.linkId')
      console.log('added link for ' + customerId); 
    });

I added in var id = []; to try and iterate through that, but I am failing at it. Any ideas?

Rory McCrossan · Accepted Answer · 2021-07-09 14:20:04Z

1

To achieve this you can select the .linkId elements and call the append() method on them. If you provide a function as an argument you can use this to return the HTML to append to the cell based on each element in the collection. As such you can use siblings() to retrieve the sibling .playerLink and add its text content to the URL that's generated. Try this:

let $links = $('.linkId').append(function() {
  return `<a href="/playeroverview/${$(this).siblings('.playerLink').text().trim()}/">Link</a>`
})

// for demo purposes only:
$links.on('click', e => {
  e.preventDefault();
  console.log(e.target.getAttribute('href'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody id="myTable">
    <tr>
      <td class="playerLink">1</td>
      <td>{{ item[1] }}</td>
      <td>{{ item[2] }}</td>
      <td>{{ item[3] }}</td>
      <td>{{ item[5] }}</td>
      <td class="linkId"></td>
    </tr>
    <tr>
      <td class="playerLink">2</td>
      <td>{{ item[1] }}</td>
      <td>{{ item[2] }}</td>
      <td>{{ item[3] }}</td>
      <td>{{ item[5] }}</td>
      <td class="linkId"></td>
    </tr>
    <tr>
      <td class="playerLink">3</td>
      <td>{{ item[1] }}</td>
      <td>{{ item[2] }}</td>
      <td>{{ item[3] }}</td>
      <td>{{ item[5] }}</td>
      <td class="linkId"></td>
    </tr>
  </tbody>
</table>

answered Jul 9, 2021 at 14:20

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

willisj318 Over a year ago

Thanks Rory! This has me almost there, the link is taking me to the correct URL, but for me insead of just 'link', it adds, LinkLinkLinkLinkLinkLinkLink. My assumption is because this runs prior to my for clause in the html?

willisj318 Over a year ago

Ignore me, I figured it out! Had to remove older code, thank you so much!

Rory McCrossan Over a year ago

No problem, glad to help

Collectives™ on Stack Overflow

Use JQuery to add a link from array objects

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related