Question

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

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>

调用handleExport将表导出到csv文件中

handleExport = () => {
    let csv = Papa.unparse(this.props.holdinginfo);
    console.log(csv);
}

但是由于this.props.holdinginfo是嵌套的树对象，所以console.log的输出为“” [对象对象]，[对象对象]，[对象对象]，[对象对象]，[对象对象]， [object Object]，[object Object] ....“

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

感谢您的帮助！

Answer 1

我首先将json对象首先转换为列表，我将创建一个对元素进行解析的递归函数，每次找到属性时，它只会附加其值，但是如果找到一个对象或数组，则调用递归该函数应返回要附加到主列表的元素列表，或者代替返回列表，您可以返回一个字符串，并在递归过程中构建该字符串。我会考虑的另一个选择是创建一个递归函数，将多级json对象转换为普通的json对象，将json对象传递给递归，在每次递归中添加当前级别的属性，然后将其转换为我需要的任何东西。当然，只有在我找不到能自动运行的库或函数的情况下，我才会尝试那些。

Answer 2

您无法调用papa.unparse，因为您没有平面数组。您的数据结构是递归的，因此在将其发送到papa.unparse之前，需要一个递归函数进行展平。

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));

Answer 3

从后端获取json文件。
导入此module，并将您的json传递给它
然后，使用户能够下载您的csv。...选中here

Answer 4

要进入简单列表，可以使用类似于以下内容的递归函数：

const input = [{
  '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
          }
        ]
      }]
    }
  ]
}];


var result = [];

function toCSV(items) {
  if (items) {
    items.forEach(function(a) {
      result.push({
        0: a.holder,
        1: a.Position + '/' + a.pct_shares_out
      });
      toCSV(a.Node);
    });
  }
}
  toCSV(input);
console.log(result)

可以根据要求进行修改，并在papaparse中使用。

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

4 个答案: