javascript - 如何将 jquery stringify 数据附加到具有 4 个用户的可编辑(tr 和 td)数据的表中，如循环

Question

我正在获取 json.stringyfy 数据并想将所有 json.stringyfy 数据附加到表中，每个 tr 都是可编辑的但我不知道 jquery 的那么多部分所以无法得到任何想法谁能告诉我应该做什么实现这个目标？

得到响应的Json数据

[{"id":"1","name":"abc"},     user  id 1 data
{"id":"2","name":"def"},      user  id 2 data
{"id":"3","name":"xyz"},      user id 3 data
{"id":"4","name":"aaa"}]      user id 4 data

Ajax调用成功函数处理stringyfy数据

$.ajax({
            url: "<?= base_url('Test_controller/show_user') ?>",
            type: 'POST',
            data: {
            },
            success: function (response) {
                var myJSON = JSON.stringify(response);
// code Here  to append data in table one by one with content editable tr

            }
        });

HTML 表格

<table class="show_data">
     <tr>
          <th>User id</th>
          <th>User name</th>
     </tr>
</table>

Answer 1

只需获取您的数据并将其附加到表中即可。遍历数据中的每个条目并(如果使用 jquery)执行 .append()。我只是用你的 json 创建了一个简单的变量，但你可以在成功函数中用你的 myJSON 变量来做到这一点。

var data = [{"id":"1","name":"abc"},
{"id":"2","name":"def"},  
{"id":"3","name":"xyz"},
{"id":"4","name":"aaa"}]


data.forEach(user => {
    $('.show_data').append(`<tr><td>${user.id}</td><td>${user.name}</td></tr>`);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="show_data">
     <tr>
          <th>User id</th>
          <th>User name</th>
     </tr>
</table>

编辑

你得到的是错误的，因为你正在使用 JSON.stringify 使你的 json 成为一个字符串。你不能迭代一个字符串。只需使用 response 而不是 JSON.stringify(response);