如何用JavaScript将二维数组保存为JSON文件及结果重复问题排查

问题描述 #

需要将包含字符串指标列、数值列的二维数组保存为JSON文件，当前代码运行后生成的JSON存在重复内容：每个对象的identifier和values完全一致，且生成了两个对象（分别对应原数组的两行），不符合指标与数值一一对应的需求。

原实现代码：

function array2JSON(fname) {

    var totals = [
        ["ID_1", "ID_2", "ID_3", "ID_4", "ID_5","ID_6","ID_7","ID_8"],
        [171.82, 54.0, 2.33, 1234.2, 1.23, 45.67, 0.98,0.123]
    ]; 
    
    var totalsObj =  totals.reduce((map, totals) => { 
        map.totals.push(  {identifier: totals, values: totals}); 
        return map;
    }, { totals: []});

    var myBlobFile = new Blob([JSON.stringify(totalsObj,null,4)], { 
       type: 'text/json;charset=utf-8' 
    });
    
    var url = window.URL || window.webkitURL;
    
    var temp_link = document.createElement('a');
    temp_link.download = fname+".json";
    temp_link.href = URL.createObjectURL(myBlobFile);
    //temp_link.hidden = true;
    // This link should not be displayed
    document.body.appendChild(temp_link);
    temp_link.click();
    document.body.removeChild(temp_link);
}

当前错误输出：

{
    "totals": [
        {
            "identifier": [
                "ID_1",
                "ID_2",
                "ID_3",
                "ID_4",
                "ID_5",
                "ID_6",
                "ID_7",
                "ID_8"
            ],
            "values": [
                "ID_1",
                "ID_2",
                "ID_3",
                "ID_4",
                "ID_5",
                "ID_6",
                "ID_7",
                "ID_8"
            ]
        },
        {
            "identifier": [
                171.82,
                54,
                2.33,
                1234.2,
                1.23,
                45.67,
                0.98,
                0.123
            ],
            "values": [
                171.82,
                54,
                2.33,
                1234.2,
                1.23,
                45.67,
                0.98,
                0.123
            ]
        }
    ]
}

原因分析 #

1. 参数命名冲突：reduce的第二个参数命名为totals，和外层定义的二维数组变量名重名，导致遍历过程中变量混淆，但这不是核心问题。
2. 逻辑错误：原代码将二维数组的每一行都同时赋值给identifier和values，完全误解了“指标列对应数值列”的需求，正确逻辑应该是将第一行的每个指标和第二行对应位置的数值配对。

解决办法 #

修改totalsObj的生成逻辑，提取指标列和数值列后，通过索引一一配对生成目标对象：

function array2JSON(fname) {

    var totals = [
        ["ID_1", "ID_2", "ID_3", "ID_4", "ID_5","ID_6","ID_7","ID_8"],
        [171.82, 54.0, 2.33, 1234.2, 1.23, 45.67, 0.98,0.123]
    ]; 
    
    // 提取指标列和数值列
    const identifiers = totals[0];
    const values = totals[1];
    // 遍历索引，将指标与对应数值配对
    const totalsObj = {
        totals: identifiers.map((id, index) => ({
            identifier: id,
            value: values[index]
        }))
    };

    var myBlobFile = new Blob([JSON.stringify(totalsObj,null,4)], { 
       type: 'text/json;charset=utf-8' 
    });
    
    var url = window.URL || window.webkitURL;
    
    var temp_link = document.createElement('a');
    temp_link.download = fname+".json";
    temp_link.href = URL.createObjectURL(myBlobFile);
    document.body.appendChild(temp_link);
    temp_link.click();
    document.body.removeChild(temp_link);
}

修正后输出 #

{
    "totals": [
        {
            "identifier": "ID_1",
            "value": 171.82
        },
        {
            "identifier": "ID_2",
            "value": 54
        },
        {
            "identifier": "ID_3",
            "value": 2.33
        },
        {
            "identifier": "ID_4",
            "value": 1234.2
        },
        {
            "identifier": "ID_5",
            "value": 1.23
        },
        {
            "identifier": "ID_6",
            "value": 45.67
        },
        {
            "identifier": "ID_7",
            "value": 0.98
        },
        {
            "identifier": "ID_8",
            "value": 0.123
        }
    ]
}

内容的提问来源于stack exchange，提问作者Wolfram Scharnhorst