如何使用 jquery 在 HTML 表中显示 json 内容

Question

我想在使用 jquery 的 HTML 表中显示从 Web 服务获取数据的 JSON 内容。这是我的jQuery代码

 <script type="text/javascript">
    $(document).ready(function () {
        
        var vill = "C2D80C4C-A691-DC11-8631-000E0CA4A31A";
        var teh = "164";
        var khr = "5//10";

        $.ajax({
            url: 'http://___link___/GisWebService.asmx/GisWebService',
            data: { village_id: vill, tehsil_id: teh, khasra_no: khr },
            method: 'post',
            datatype: 'json',
            success: function (data) {

                var str;
                str = new XMLSerializer().serializeToString(data);
                
                re = /\[(.*?)\]/;
                str = str.match(re)[1];
                str = '[' + str + ']';

                alert(str);

                $.getJSON(str, function (data) {
                    var emp_data = '';
                  
                    $.each(data, function (key, value) {
                        emp_data += '<tr>';
                        emp_data += '<td>' + value.khewat_no + '</td>';
                        emp_data += '<td>' + value.Column1 + '</td>';
                        emp_data += '<td>' + value.owner_share + '</td>';
                        emp_data += '</tr>';
                    });
                    $('#emp_tab').append(emp_data);
                });

               

            },
            error: function (err) {
                alert(err);
            }
        });

      
    });
</script>

alert(str) 显示输出 enter image description here

[{"khewat_no":"390","Column1":"ਜਸਮੇਲ ਸਿੰਘ ਪੁੱਤਰ ਸੋਹਣ ਸਿਘ ਪੁੱਤਰ  ਕਿਸਨ ਸਿੰਘ vbcrlf ","owner_share":"50/151"},{"khewat_no":"390","Column1":"ਸੁਖਦੇਵ ਕੌਰ ਪਤਨੀ ਸੋਹਣ ਸਿੰਘ ਪੁੱਤਰ  ਕਿਸ਼ਨ ਸਿੰਘ vbcrlf ","owner_share":"25/151"}]

但是当它被转换为 HTML 表格时，它没有显示正确的内容它只显示列而不显示行 enter image description here

这是我的 HTML 代码

 <table border="1" id="emp_tab">
    <tr>
        <td>khewat_no</td>
        <td>Column1</td>
        <td>owner_share</td>
    </tr>
</table>

Answer 1

您似乎混淆了用于发出 ajax 请求的 $.getJSON() 与将 json 字符串转换为对象/数组的 JSON.parse()；

试试

var data = JSON.parse(str);
var emp_data = '';

$.each(data, function (key, value) {
  emp_data += '<tr>';
  emp_data += '<td>' + value.khewat_no + '</td>';
  emp_data += '<td>' + value.Column1 + '</td>';
  emp_data += '<td>' + value.owner_share + '</td>';
  emp_data += '</tr>';
});
$('#emp_tab').append(emp_data);