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

Posted 2023-05-08

【中文标题】如何使用 jquery 在 HTML 表中显示 json 内容

【英文标题】：How to show json content in HTML table using jquery

【发布时间】：2021-09-26 14:25:18

【问题描述】：

我想在使用 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>

【参考方案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);

【讨论】：

谢谢，先生，您给出了宝贵的答复，此代码工作正常

太棒了。然后随意接受这个答案