Question

我尝试将CSV文件的内容加载到JavaScript对象数组中。不幸的是，数据的结构不是平坦的，因此为了缓解这种情况，我将点分隔的属性名称用作CSV文件中的列标题。 CSV文件示例如下所示：

codes.code1,codes.code2,codes.code3,codes.code4,info.description.text,info.description.language
49074202,64,1443,1416,Test description: 49074202 64 1443 1416,EN
81905948,10,9721,5411,Test description: 81905948 10 9721 5411,EN
87262350,86,7050,4775,Test description: 87262350 86 7050 4775,EN

我想要最终得到的对象结构如下

{
    codes: {
        code1: "49074202",
        code2: "64",
        code3: "1443",
        code4: "1416"
    },
    info: {
        description: {
            text: "Test description: 49074202 64 1443 1416",
            language: "EN"
        }
    }
}

以下代码可用于重新创建问题（使用上面发布内容的CSV文件）。

<html>
    <body>
        <form>
            <input type="file" id="files" onchange="loadFromFile()" />
            <script>
                function loadFromFile() {
                    var selectedFile = document.getElementById('files').files[0];
                    var reader = new FileReader();
                    reader.onload = loadRowsFromFile;
                    reader.readAsText(selectedFile);
                };

                function loadRowsFromFile(e) {
                    var rows = e.target.result.split("\n");
                    if (!rows || rows.length === 0) {
                        return;
                    }
                    var headers = rows[0].split(",");

                    var loadedData = [];
                    for (var i = 1; i < rows.length; i++) {
                        var columns = rows[i].split(",");

                        var rowData = {};
                        for (var j = 0; j < headers.length; j++) {
                            placeElementInHierarchy(rowData, headers[j], columns[j]);
                        }
                        loadedData.push(rowData);
                    }
                    console.log(loadedData);
                }

                function placeElementInHierarchy(rowData, propertyPath, value) {
                    var path = propertyPath.split(".");
                    var obj = rowData;
                    for (var i = 0; i < path.length; i++) {
                        if (i === path.length - 1) {
                            obj[path[i]] = value;
                        } else {
                            if (!obj[path[i]]) {
                                obj[path[i]] = {};
                            }
                            obj = obj[path[i]];
                        }
                    }
                }
            </script>
        </form>
    </body>
</html>

文件解析正常，数据已正确加载到结构中。但是，由于某种原因，最后处理的属性名称被引用。我获得的所有行的结构如下所示：

{
    codes: {
        code1: "49074202",
        code2: "64",
        code3: "1443",
        code4: "1416"
    },
    info: {
        description:{
            text: "Test description: 49074202 64 1443 1416",
            "language": "EN"
        }
    }
}

我目前唯一的领先优势是，如果我从CSV文件中删除了“语言”列，那么将改为引用“文本”-因此出于某种原因引用了最后处理的属性。预先感谢！

编辑：修复了预期结构中的错误。

EDIT2 ：有趣的是，以下代码（跳过文件上传部分）没有出现这种症状

<html>
    <body>
        <form>
            <script>                


                (function() {
                    var csvData = 'codes.code1,codes.code2,codes.code3,codes.code4,info.description.text,info.description.language\n' +
                                '49074202,64,1443,1416,Test description: 49074202 64 1443 1416,EN\n' +
                                '81905948,10,9721,5411,Test description: 81905948 10 9721 5411,EN\n' +
                                '87262350,86,7050,4775,Test description: 87262350 86 7050 4775,EN';
                    loadRowsFromFile(csvData);
                })();



                function loadRowsFromFile(csvData) {
                    var rows = csvData.split("\n");
                    if (!rows || rows.length === 0) {
                        return;
                    }
                    var headers = rows[0].split(",");

                    var loadedData = [];
                    for (var i = 1; i < rows.length; i++) {
                        var columns = rows[i].split(",");

                        var rowData = {};
                        for (var j = 0; j < headers.length; j++) {
                            placeElementInHierarchy(rowData, headers[j], columns[j]);
                        }
                        loadedData.push(rowData);
                    }
                    console.log(loadedData);
                }

                function placeElementInHierarchy(rowData, propertyPath, value) {
                    var path = propertyPath.split(".");
                    var obj = rowData;
                    for (var i = 0; i < path.length; i++) {
                        if (i === path.length - 1) {
                            obj[path[i]] = value;
                        } else {
                            if (!obj[path[i]]) {
                                obj[path[i]] = {};
                            }
                            obj = obj[path[i]];
                        }
                    }
                }
            </script>
        </form>
    </body>
</html>

Answer 1

好的。从上面的屏幕中可以看到，问题是由文件每一行末尾的回车符\r引起的。您可以使用

从字符串中删除所有空字符

trim()

，或者您可以使用regexp来剪除此类字符。示例在这里完成： How to remove all line breaks from a string?

动态创建的对象中意外的带引号的属性

1 个答案: