Question

我有一个返回2D对象的ajax调用，我希望能够将其转换为.csv文件供用户下载。

php代码：echo json_encode($results);

js函数，现在有console.log (JSON.parse(res));所以我可以验证内容。

控制台日志显示：

Object {color: Object, animal: Object}
  color: Object
    1: "red"
    2: "white"
    3: "blue"
  animal: Object
    1: "cat"
    2: "dog"
    3: "mouse

每个内部对象始终具有相同数量的元素（在本例中为3）

我想将其转换为csv然后下载。 csv的第一行包含外部对象键（颜色，动物）csv最终会像这样：

"color, animal"
"red, cat"
"white, dog"
"blue, mouse"

通过我看过的解决方案，他们将对象的连接版本附加到每一行。我需要垂直转置数据。

我认为我需要逐步浏览每个内部对象（获取每个内部对象的第n个元素，获取每个内容的第n + 1个元素等）并构建我自己的csv字符串，但这看起来非常笨重。

那里有任何漂亮的数组/对象可以帮助我吗？

我可以创建和下载.csv文件，它只是这个数据转置逻辑让我陷入困境。

编辑：我不是试图将csv字符串转换为数组，也不是试图转换2D数组（它是2D对象）。

澄清在我对php文件的ajax调用中，我发送了一个["color", "animal"]数组，该数组来自用户输入。 php文件读取此数组并根据此数组收集数据。收集数据后，它返回一个2D数组，内部数组是新数据。因此：

[color[red, white, blue], animal[cat,dog,mouse]]

Answer 1

根据你的问题，你说的是console.log（$ result），这意味着你试图通过我认为的AJAX来获取它。

我建议你不要在客户端JavaScript上创建CSV，从你的PHP代码中创建它，只需为你的php文件添加一个超链接，其中包含带有Content-Type和Content-Disposition的CSV创建代码，因此浏览器将直接显示文件保存对话框。

请参阅此回答File is not being downloaded when requested through Ajax using JQuery

只需添加超链接

<a href="admin_ajax.php">Download</a>

参考Force Download CSV File
请参阅Create a CSV File for a user in PHP

- 编辑 -

可以使用客户端CSV。

但我推荐服务器端CSV的原因。

CSV的大小可能会更大，这可能会使您的客户端大小基于JSON的循环消耗内存并可能降低浏览器性能。
服务器端压缩选项如GZIP或反向代理压缩流量很容易，它将由浏览器自动解压缩，但客户端解压缩可能很简单
如果您想提供PDF或Rich XLSX文件下载选项的附加选项，可能无法在javascript中轻松实现。

Answer 2

你可以尝试类似的东西：

＆＃13;

var rep = JSON.parse('{"color":{"1":"red","2":"white","3":"blue"},"animal":{"1":"cat","2":"dog","3":"mouse"}}')
function toCSV(jsonObject) {
  var csv = [];
  for (var i in jsonObject) {
    if (jsonObject.hasOwnProperty(i)) {
      var title = i.indexOf(' ')>-1? '"'+i+'"': i;
      csv[0] ? csv[0].push(title) : csv[0] = [title];
      var k = Object.keys(jsonObject[i]);
      for (var j = 0; j < k.length; j++) {
        var val = jsonObject[i][k[j]].indexOf(' ')>-1? '"'+jsonObject[i][k[j]]+'"': jsonObject[i][k[j]];;
        csv[j+1] ? csv[j + 1].push(val) : csv[j+1] = [val];
      }
    }
  }
  return csv.join('\n');
}

document.body.innerHTML = toCSV(rep).replace(/\n/g, '<br>');

＆＃13;

Answer 3

var k = JSON.parse('{"color":{"1":"red","2":"white","3":"blue"},"animal":{"1":"cat","2":"dog","3":"‌mouse"}, "price":{"1":"1000","2":"2000","3":"3000"}}');

var finalStr = '';
//Extract Top Columns Name
var keyList = [];
for(each in k) {
    keyList.push(each)
}
//Join them accordingly
finalStr = '"' + keyList.join(", ") + '"\n'

//As you said - Each of the inner objects always has the same number of elements (in this case, 3)
var startRef = k[keyList[0]];

//for each key in ref object
for(each in startRef) {
    var arr = [];
    //extract value for that key in each child object 
    for(var i=0;i<keyList.length;i++) {
        arr.push(k[keyList[i]][each])
    }
    //Join them accordingly
    finalStr += '"' + arr.join(", ") + '"\n'
}
console.log(finalStr)

//Output
"color, animal, price"
"red, cat, 1000"
"white, dog, 2000"
"blue, ‌mouse, 3000"

JS：将带有键的2D对象转换为转置的csv

3 个答案: