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

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 文件读取这个数组并根据这个数组收集数据。收集数据后，它会返回一个二维数组，内部数组是新数据。因此：

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

Answer 1

你可以试试这样的：

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

Answer 2

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"

Answer 3

根据您的问题，您说的是 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 选项或丰富的 XL​​SX 文件下载选项，使用 javascript 可能不太容易。