Dynamically add link to javascript generated AJAX HTML table

I am generating HTML tables with javascript, populating the cells with data from an AJAX file. I want to dynamically add links to certain cells. Linking to myfile.php. I'll let the PHP deal with the requests.

Every cell should have a link. All linking back to my php file, something like

<a href="myfile.php?data=whatever_the _cell_value_is">Click here</a>

But, how can I add the links?

Take this simple example. Only two fields. So I want each cell to have a unique link back to my server so I can then serve another JSON file for expanded info.

I was thinking of a conditional, depending on the key.

 if(index == 'username') {

    ADD THE LINK
 } else { 
    .....
 }

I am having trouble with the correct syntax, I having trouble getting it to work. All these years, I never programmed Javascript.

See my code below.

<HTML>
    ...

    <script>
    var data = [
        {
            "id": "3",
            "username": "foo",
            "email": "[email protected]"
        },
        {
            "id": "9",
            "username": "foobarbam",
            "email": null
        },
        {
            "id": "10",
            "username": "bar",
            "email": "[email protected]"
        },
        {
            "id": "11",
            "username": "bam",
            "email": null
        },
        {
            "id": "12",
            "username": "snoopy",
            "email": null
        },
        {
            "id": "15",
            "username": "rogerwaters",
            "email": "[email protected]"
        }
   ];



   var keys = [];

   document.write("<table><tr>");
   var tr;
    for (var i = 0; i < data.length; i++) {
        tr = $('<tr/>');
        tr.append("<td>" + data[i].username + "</td>");
        tr.append("<td>" + data[i].email + "</td>");
        
        $('table').append(tr);
    }

    document.write("</table>");
    </script>
</body>

Solution

If every cell should contain a link, then you don't need any kind of conditional. You can just amend the HTML so it outputs a link each time.

Demo:

var data = [{
    "id": "3",
    "username": "foo",
    "email": "[email protected]"
  },
  {
    "id": "9",
    "username": "foobarbam",
    "email": null
  },
  {
    "id": "10",
    "username": "bar",
    "email": "[email protected]"
  },
  {
    "id": "11",
    "username": "bam",
    "email": null
  },
  {
    "id": "12",
    "username": "snoopy",
    "email": null
  },
  {
    "id": "15",
    "username": "rogerwaters",
    "email": "[email protected]"
  }
];

document.write("<table><tr>");
var tr;
for (var i = 0; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td><a href='myfile.php?data=" + data[i].username + "'>" + data[i].username + "</a></td>");
  tr.append("<td><a href='myfile.php?data=" + data[i].email + "'>" + data[i].email + "</a></td>");

  $('table').append(tr);
}

document.write("</table>");

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