Making URLs Clickable within JS in single HTML Table column? (CSV Parsing to HTML Table)

Question

I'm using PapaParse to parse data from a CSV and display the results in a HTML table. The HTML table contains a column with URL's. Currently my parser is parsing them in TEXT format. I want these URLs to be clickable, however they are in text format.

The HTML:

  <html>
    <head>
        <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="http://papaparse.com/resources/js/papaparse.js"></script>
        <script src="test.js"></script>
        <link rel="stylesheet" href="main.css">
      <meta charset="utf-8">
    <meta http-equiv="refresh" content="120"><!-- REFRESH EVERY 2 minutes -->
      <title>JS Bin</title>
    </head>
    <body>
        <table id="results">
            <tbody>
            </tbody>
        </table>

    </body>
    </html>

The JavaScript:

$(function() {
    Papa.parse("data/file.csv", {
        download: true,
        complete: function(results) {
            console.log("Remote file parsed!", results.data);
            $.each(results.data, function(i, el) {
                var row = $("<tr/>");
                row.append($("<td/>").text("")); /**List Number**/
                $.each(el, function(j, cell) {
                    if (cell !== "")
                        row.append($("<td/>").text(cell));
                });
                $("#results tbody").append(row);
            });
        }
    });
});

file.csv

1, search, www.google.com
2, car, www.autotrader.com
3, news, www.bbc.co.uk/news

The current output will be all the above fields, but all in text format. I would like the all the last fields (the URLs) to be clickable. Is this possible, using my above method?

This is not a duplicate of: How to replace plain URLs with links? - It has nothing to do with parsing CSV files and the regexp principles maybe over complicated for this use case. There must a much simpliar solution

score 1 · Answer 1 · answered Nov 15 '16 at 18:21

You are experiencing troubles while creating the table rows. The correct way is:

row.append($("", {text: cell})); // if it is not the last cell or URL
row.append($("").append($('', {href: cell, text: cell})));

The snippet:

//Papa.parse("data/file.csv", {
Papa.parse('1, search, www.google.com\n\
2, car, www.autotrader.com\n\
3, news, www.bbc.co.uk/news\n', {
           //download: true,
           complete: function(results) {
  //console.log("Remote file parsed!", results.data);
  $.each(results.data, function(i, el) {
    var row = $("<tr/>");
    $.each(el, function(j, cell) {
      if (cell !== "") {
        if (j != 2) {
          row.append($("<td/>", {text: cell}));
        } else {
          row.append($("<td/>").append($('<a/>', {href: cell, text: cell})));
        }
      }
    });
    $("#results tbody").append(row);
  });
}
});

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.1.2/papaparse.js"></script>

<table id="results">
    <tbody>
    </tbody>
</table>

Making URLs Clickable within JS in single HTML Table column? (CSV Parsing to HTML Table)

1 Answers1