Append table with Django URL tag JQuery-CodePudding

I have a table I am appending with user details and want to add a Django URL tag to the row and grab the primary key in the tag.

something like this:

function putTableData(response) {
    let row;
    $("#table_body").html("");
    if (response["data"].length > 0) {
        $.each(response["data"], function (a, b) {
            row = `<tr>
                        <td>${b["first_name"]} ${b["last_name"]}</td                               
                        <td>${b["phone"]}</td>                   
                        <td>
                            <a onclick='console.log("${b["pk"]}")' data-url="{% url 'users:edit' user.${b["pk"]} %}">
                            </a>                     
                        </td>
                    </tr>`;

                $("#table_body").append(row)

The onclick console log is printing the users primary key, but when I try to add the data url tag, I get "Could not parse the remainder ${b["pk"]}

How would I make this work?

CodePudding user response：

Try this:

$.each(response["data"], function (a, b) {
    data_url = "{% url 'users:edit' 1 %}".replace(1, b["pk"])
    row = `<tr>
                    <td>${b["first_name"]} ${b["last_name"]}</td                               
                    <td>${b["phone"]}</td>                   
                    <td>
                        <a onclick='console.log("${b["pk"]}")' data-url=" data_url ">
                        </a>                     
                    </td>
                </tr>`;

    $("#table_body").append(row)
});

CodePudding user response：

I was able to solve with:

function putTableData(response) {
let row;
$("#table_body").html("");
if (response["data"].length > 0) {
    $.each(response["data"], function (a, b) {
        row = `<tr>
                    <td>${b["first_name"]} ${b["last_name"]}</td                               
                    <td>${b["phone"]}</td>                   
                    <td>
                        <a data-url="/users/${b["pk"]}/edit">
                        </a>                     
                    </td>
                </tr>`;

            $("#table_body").append(row)