Basic Master /Detail data load with Json

I added basic Json data call /parse function to my library works in .NetCore Razor page. Simple / usefull.

@page
@model BPMPredev1UI.Models.BPTemplate

@{
    ViewData["Title"] = "Templatesss";
}


<div class="text-center">


    <div id="divmaster"></div>

    <div id="divdetail"></div>

    <div id="notification"></div>
</div>





@section scripts{

    <script>
        $(function () {

            var url = 'http://localhost:62174/GetBPTJsonDetail';

            // Get the JSON file
            $.getJSON(url, function (data) {


                var tbl = $('<table/>')
                    .attr("id", "tmaster")
                    .attr("class", "table-striped");
                $("#divmaster").empty();
                $("#divmaster").append(tbl);
                tbl.append(`<thead><tr>
                                        <th scope="col">Template Id</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">detail</th>
                                </tr></thead><tbody>`);
                for (i in data.row) {
                    var datastr = JSON.stringify(data.row[i]);
                    //  alert(datastr);
                    //  datastr = JSON.stringify(data.row[i].BPTemplateDetails);
                    //  alert(datastr);
                    //    var detaildata = JSON.parse(JSON.stringify(data.row[i].BPTemplateDetails));
                    var jsonObj = JSON.parse(datastr);
                    //   alert(jsonObj);
                    tbl.append(`<tr> <th scope="row">${data.row[i].BPTemplateId}</th>
                                                   
                                                    <td>${data.row[i].Name}</td>
                                                    <td>
                                                    <button id= "detailbutton${i}">detail</button>
                                                    <button onclick="showdetail(${data.row[i].BPTemplateId})">edit</button>
                                                    <button onclick="showdetail(${data.row[i].BPTemplateId})">delete</button></td>
                                              </tr>`);
                    $("#detailbutton" + i).on('click', $.proxy(showdetaildata, this, jsonObj));
                }
                tbl.append("</tbody>");

            });


        });

        function showdetaildata(detaildata) {

            // detaildata = JSON.parse(datad);
            var tbl = $('<table/>').attr("id", "bptdetailgrid")
                .attr("class", "table-hover table-sm");
            $("#divdetail").empty();
            $("#divdetail").append(tbl);
            tbl.append(`<thead class=table-secondary><tr>
                                        <th>Template Id</th>
                                        <th>Id</th>
                                        <th>StepId</th>
                                        <th>Name</th>
                                </tr></thead>`);
            //var dataarr = [];
            //dataarr.push(detaildata);
            //for (i = 0; i < dataarr.length;i++) {
            tbl.append("<tbody>");
            for (i in detaildata.BPTemplateDetails) {
                tbl.append(`<tr>
                                                    <td>${detaildata.BPTemplateDetails[i].BPTemplateId}</td>
                                                    <td>${detaildata.BPTemplateDetails[i].BPTemplateDetailId}</td>
                                                    <td>${detaildata.BPTemplateDetails[i].StepId}</td>
                                                    <td>${detaildata.BPTemplateDetails[i].Name}</td>
                                              </tr>`);
            }
            tbl.append("</tbody>");
        }


        function showdetail(id) {
            var urldetail = "http://localhost:62174/GetBPTDetailJson?id=" + id;

            // Get the JSON file
            $.getJSON(urldetail, function (data) {


                var tbl = $('<table"/>').attr("id", "bptdetailgrid")
                    .attr("class", "table");
                $("#divdetail").empty();
                $("#divdetail").append(tbl);
                tbl.append(`<thead><tr>
                                        <th>Template Id</th>
                                        <th>Id</th>
                                        <th>StepId</th>
                                        <th>Name</th>
                                </tr></thead>`);
                for (i in data.rows) {
                    tbl.append(`<tr>
                                                    <td>${data.rows[i].BPTemplateId}</td>
                                                    <td>${data.rows[i].BPTemplateDetailId}</td>
                                                    <td>${data.rows[i].StepId}</td>
                                                    <td>${data.rows[i].Name}</td>
                                              </tr>`);
                }

            });
        }

    </script>
}