logo标签列表

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

javascript
3

我尝试将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文件中删除“language”列，则“text”将被引用 - 因此最后处理的属性因某种原因被引用。提前致谢！
编辑：修正了预期结构中的错误。
编辑2：有趣的是，以下代码（跳过文件上传部分）没有显示出这种症状。
<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>
引号没有在你的代码中被引入。 - Pointy
对预期输出进行了修正 - 对此表示抱歉。引号似乎会产生影响，当我尝试使用Angular指令访问这些数据时。 - darklurker
我认为引号是由 console.log() 引入的一种人为因素。请在另一个浏览器中尝试。 - Pointy
这基本上就是这个问题的关键 - 这些引用来自哪里？ - darklurker
1
请问您能否组合一个 [mcve]，可以使用 Stack Snippets（编辑器中的图标看起来像 <>）吗？您可能需要将 CSV 存储在一个变量中，并相应地更改您的代码。 - Heretic Monkey
显示剩余6条评论
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接