如何将JSON.stringify的输出结果转换为普通文本并展示在HTML页面中

你当前得到JSON结构输出是因为调用了JSON.stringify()将包含对象的数组直接序列化了，要得到逗号分隔的纯名称内容，只需要先提取所有对象的name属性，再通过数组的join方法拼接即可。

如果你不需要保留选中项的对象结构，可以直接把选中的名称存入数组再拼接，修改后代码如下：

$(function(){
    $(".checkBoxClass").on("click", function() {
        // 直接存储选中的名称字符串
        var nameArr = [];
        $("table > tbody > tr").each(function () {
        var $tr = $(this);
        if ($tr.find(".checkBoxClass").is(":checked")) {
            nameArr.push($tr.find(".name").text());
        }
        });
        console.clear();
        // 按要求拼接为逗号+空格分隔的字符串
        var showText = nameArr.join(', ');
        // 控制台输出结果
        console.log(showText);
        // 如果需要渲染到HTML页面，可先在页面中准备一个展示容器，比如<div id="show-area"></div>，再取消下面代码的注释
        // $('#show-area').text(showText);
    });
});

如果你需要保留原有的对象数组data做其他业务逻辑处理，也可以在不修改原有数组结构的前提下单独提取名称拼接，只需要把生成messages的代码替换为下面的写法即可：

// 从对象数组中提取所有name属性，再拼接
var messages = data.map(item => item.name).join(', ');

内容的提问来源于stack exchange，提问作者Jigen Otsuki