How To Use Some Html Element Tag Inside The Json Value

i bind json data to html table using Ajax,js. In my project i have 4 table headers(S.no,name,year,download link). first three columns sync and working without error.but,last column

Solution 1:

You could use this

row.append($("<td><ahref='" + rowData.link + "'><buttonclass='btn'>Go</button></a></td>"));

Solution 2:

you have to modify the link in the data by putting just the link or by replacing the double cote (") with simple (')

1- if you want to put just the link in your data

// modify your code like this

$.ajax({
        //url: 'https://jsonplaceholder.typicode.com/posts',url: 'https://10rs.000webhostapp.com/json-data.json',
        type: "get",
        dataType: "json",

        success: function (data) {
            drawTable(data);
        }
    });

    functiondrawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

    functiondrawRow(rowData) {
        var row = $("<tr />")
        $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.name + "</td>"));
        row.append($("<td>" + rowData.year + "</td>"));
        row.append($("<td><a href='" + rowData.link + "' class='btn btn-info' role='button'>Link Button</a></td>"));
    }

2- if you want to replace the double cote (") with simple cote (') leave your code without changing and it will be functional

Solution 3:

Finally i got my complete answer and project running well.

HTML

<divclass="container"><divclass="header"><h2>A R Rahman All Movie Songs</h2><p>Download songs free</p></div><!-- header end --><divclass="table-responsive-md"><tableid="personDataTable"class="table table-dark"><thead><tr><th>S.No</th><th>Movie Name</th><th>Year</th><th>Download</th></tr></thead></table></div><!-- table end --><footerclass="bg-success"><pstyle="color:#ffffff;">Design and Developed by
            <spanstyle="color:red;background-color:yellow;">Rajadurai</span></p></footer></div>

JAVASCRIPT

<script>
    $.ajax({
        //url: 'https://jsonplaceholder.typicode.com/posts',url: 'https://10rs.000webhostapp.com/ar/json-data.json',
        //url: 'json-data.json',type: "get",
        dataType: "json",

        success: function (data) {
            drawTable(data);
        }
    });

    functiondrawTable(data) {
        for (var i = 0; i < data.length; i++) {
            drawRow(data[i]);
        }
    }

    functiondrawRow(rowData) {
        var row = $("<tr />")
        $("#personDataTable").append(row);
        row.append($("<td>" + rowData.id + "</td>"));
        row.append($("<td>" + rowData.title + "</td>"));
        row.append($("<td>" + rowData.year + "</td>"));
        row.append($("<td><a href='" + rowData.link + "' class='btn btn-info' role='button' target='_blank'>Download</a></td>"));
}
</script>

JSON

[{"id":1,"title":"Roja","year":"1992"},{"id":2,"title":"Gentleman","year":"1993"},{"id":3,"title":"Kizhakku Cheemayile","year":"1993"},{"id":4,"title":"Pudhiya Mugam","year":"1993"},{"id":5,"title":"Thiruda Thiruda","year":"1993"}]

OUTPUT

Click this link to view output