Javascript 如何将嵌套json树转换为csv

现在我有一个嵌套的JSON树对象（this.props.holdinInfo）从后端发送到前端，我正在尝试在网页上添加一个导出按钮，以便能够使用react将JSON对象导出到csv文件

JSON树对象如下所示：

[{'holder': 'Passive', 'Position': 500.0, 'pct_shares_out': 0.5,
    'Node': [{'holder': 'TD Inc.', 'Position': 300.0, 'pct_shares_out': 0.2,
            'Node': [{'holder': 'TD ETF', 'Position': 400, 'pct_shares_out': 0.1}, 
                 {'holder': 'TD Fund', 'Position': 430.0, 'pct_shares_out': 0.2}]}, 
 {'holder': 'Active', 'Position': 725.0, 'pct_shares_out': 0.1, 
    'Node': [{'holder': '18 Asset', 'Position': 390, 'pct_shares_out': 0.5, 
            'Node': [{'holder': '18 Inc.', 'Position': 190, 'pct_shares_out': 0.2}, 
                 {'holder': 'Lysander-18 Equity Fund Series A', 'Position': 19, 'pct_shares_out': 0.05}]}]}];

我希望csv文件的格式如下：

holder/position/pct_share_out
'Passive'/500.0/0.5
'TD Inc.'/300.0/0.2
'TD ETF'/400/0.1
'TD Fund'/430/0.2
'Active'/725/0.1
'18 Asset'/390/0.5
'18 Inc.'/190/0.2
'Lysander-18 Equity Fund Series A'/19/0.05 

我现在做的是在组件的js文件中添加一个按钮：

<Button variant="contained" 
    size="small" 
    onClick={this.handleExport}>
    <SaveIcon label="Export" />
        Export
</Button>

但由于this.props.holdininfo是一个嵌套的树对象，因此console.log的输出是“[object object]、[object object]、[object object]、[object object object]、[object object object]、[object object object]、[object object object]。。。。"

我有个问题- 1-如何将嵌套树JSON转换为csv？ 2-当用户单击按钮时，如何下载该csv

---

感谢您的帮助！！

首先，我会将json对象转换为一个列表，我会创建一个递归函数来解析元素，每次它找到一个属性时，它只会附加它的值，但是如果它找到一个对象或数组，请调用递归函数，该函数应该返回一个元素列表以附加到主列表，或者您可以返回字符串，而不是返回列表，在递归过程中生成字符串。 我将考虑的另一个选项是创建一个递归函数，将多级JSON对象转换成一个纯JSON对象，通过递归递归传递JSON对象，在每个递归中添加当前级别的属性，然后将其转换为我需要的任何内容。

---

当然，只有在没有找到自动执行的库或函数的情况下，我才会尝试这些操作。

您不能调用papa.unpasse，因为您没有平面数组。您的数据结构是递归的，因此在将其发送给papa.unpasse之前，您需要一个递归函数来展平if

const j = [{'holder': 'Passive', 'Position': 500.0, 
'pct_shares_out': 0.5,                          
'Node': [{'holder': 'TD Inc.', 'Position': 300.0, 'pct_shares_out': 0.2,                                
'Node': [{'holder': 'TD ETF', 'Position': 400, 'pct_shares_out': 0.1},                               
{'holder': 'TD Fund', 'Position': 430.0, 'pct_shares_out': 0.2}]},
{'holder': 'Active', 'Position': 725.0, 'pct_shares_out': 0.1,                                     
'Node': [{'holder': '18 Asset', 'Position': 390, 'pct_shares_out': 0.5,                                 
'Node': [{'holder': '18 Inc.', 'Position': 190, 'pct_shares_out': 0.2},                              
{'holder': 'Lysander-18 Equity Fund Series A', 'Position': 19, 'pct_shares_out': 0.05}]}]}]}];

const papa = require('papaparse');                                                               
function flatten(array) {                           
        var result = [];                                
        array.forEach(function (a) {                        
        var node = a.Node;
        delete a.Node;
        result.push(a);
        if (node) {
            result = result.concat(flatten(node));
        }
    });
    return result;
}
const flat = flatten(j);
console.log(flat)
console.log(papa.unparse(flat));

从后端获取json文件

导入此文件并将json传递给它

然后，对于用户能够下载您的csv…检查

---

要进入一个简单的列表，可以使用如下类似的递归函数：

const输入=[{
'持有者'：'被动'，
“位置”：500.0，
“pct_分摊额”：0.5，
“节点”：[{
“持有人”：“TD公司”，
“位置”：300.0，
“pct_共享”：0.2，
“节点”：[{
‘持有人’：‘TD ETF’，
“位置”：400，
“pct\u共享出”：0.1
},
{
‘持有人’：‘运输署基金’，
“位置”：430.0，
“pct\u共享出”：0.2
}
]
},
{
'持有者'：'活动'，
“位置”：725.0，
“pct_shares_out”：0.1，
“节点”：[{
‘持有人’：‘18资产’，
“位置”：390，
“pct_分摊额”：0.5，
“节点”：[{
“持有人”：“18股份有限公司”，
“位置”：190，
“pct\u共享出”：0.2
},
{
“持有人”：Lysander-18股票基金A系列，
"位置":19,，
“pct分享”：0.05
}
]
}]
}
]
}];
var结果=[]；
功能toCSV（项目）{
若有（项目）{
项目。forEach（功能（a）{
结果：推({
0:a.holder，
1:a.职位+'/'+a.pct分享
});
toCSV（a.Node）；
});
}
}
toCSV（输入）；
console.log（result）

嘿，我是react新手，你有什么样的代码可以让我看一下吗？这与react没有什么关系，只是纯JavaScript。我会尽快制作一个示例。我认为这会对你有所帮助，除非你坚持使用React。你没有规定你正在使用的javascript框架……你会问什么库将json转换为csv……或者你自己创建库并添加到简历中

const j = [{'holder': 'Passive', 'Position': 500.0, 
'pct_shares_out': 0.5,                          
'Node': [{'holder': 'TD Inc.', 'Position': 300.0, 'pct_shares_out': 0.2,                                
'Node': [{'holder': 'TD ETF', 'Position': 400, 'pct_shares_out': 0.1},                               
{'holder': 'TD Fund', 'Position': 430.0, 'pct_shares_out': 0.2}]},
{'holder': 'Active', 'Position': 725.0, 'pct_shares_out': 0.1,                                     
'Node': [{'holder': '18 Asset', 'Position': 390, 'pct_shares_out': 0.5,                                 
'Node': [{'holder': '18 Inc.', 'Position': 190, 'pct_shares_out': 0.2},                              
{'holder': 'Lysander-18 Equity Fund Series A', 'Position': 19, 'pct_shares_out': 0.05}]}]}]}];

const papa = require('papaparse');                                                               
function flatten(array) {                           
        var result = [];                                
        array.forEach(function (a) {                        
        var node = a.Node;
        delete a.Node;
        result.push(a);
        if (node) {
            result = result.concat(flatten(node));
        }
    });
    return result;
}
const flat = flatten(j);
console.log(flat)
console.log(papa.unparse(flat));