如何输出带空格和换行的JSON格式数据？

我看你现在遇到的问题是，用JSON.stringify输出的JSON里键名完全不符合预期——本该是CSV表头的内容变成了"20"、"Barcellona"这种混乱的键，这说明你的CSV解析逻辑没正确处理表头和数据行的对应关系，而且原代码里直接取$("#fileUpload").val()只能拿到文件名，根本没读到文件内容，这也是你之前失败的核心原因之一！

问题根源 #

从你给出的输出结果来看，你的dataArray里的对象错误地把CSV单元格的交叉内容当成了键，而不是用CSV第一行的表头作为键来匹配后续行的数据值。

修正后的完整代码 #

下面是能正确解析CSV并生成规范JSON的代码，替换你原有的逻辑即可：

$(function () {
    $("#upload").bind("click", function () {
        // 获取上传的文件对象
        var file = $("#fileUpload")[0].files[0];
        if (!file) {
            alert("请先选择要上传的CSV文件");
            return;
        }

        // 使用FileReader读取文件内容
        var reader = new FileReader();
        reader.onload = function (e) {
            var csvContent = e.target.result;
            // 拆分CSV为行，过滤空行避免解析错误
            var rows = csvContent.split('\n').filter(row => row.trim() !== '');
            if (rows.length === 0) return;

            // 提取第一行作为表头，去除首尾空格
            var headers = rows[0].split(',').map(header => header.trim());
            var dataArray = [];

            // 遍历数据行，生成规范的键值对对象
            for (let i = 1; i < rows.length; i++) {
                var values = rows[i].split(',').map(val => val.trim());
                var rowObject = {};
                // 表头和数据值一一对应
                headers.forEach((header, index) => {
                    rowObject[header] = values[index] || '';
                });
                dataArray.push(rowObject);
            }

            // 输出格式化后的JSON
            $("#dvCSV").append(JSON.stringify(dataArray, null, '\t'));
        };

        reader.readAsText(file);
    });
});

代码说明 #

• 改用FileReader读取文件内容，解决了原代码只拿文件名的问题
• 拆分CSV内容为行后过滤空行，避免空行导致的解析异常
• 把CSV第一行拆分成表头数组，作为后续每个对象的键名
• 遍历每一行数据，将每个位置的值和对应表头绑定，生成规范的键值对对象
• 最后用JSON.stringify格式化输出，就能得到键名为CSV表头的正确JSON了

内容的提问来源于stack exchange，提问作者rob.m