如何从 JSON 数据下载 CSV 文件？

Question

我是一名新手程序员。我想从已过滤的 json 数据中下载 json 数据到 CSV 文件。在这里，我的 JSON API 数据：

步骤应该是这样的：

从日期选择器中选择日期范围（例如：7May-8May）
过滤后的数据将出现在使用命令console.log(filteredData)
之后点击下载按钮，将下载过滤后的数据（即5月7日-8月的数据）。

我可以执行第 1 步和第 2 步。但是第 3 步在我的代码中不起作用。任何人都可以帮我处理代码吗？目前，这是我的代码：https://jsfiddle.net/estri012/2x3hmaLo/100/

$(function() {

$('input[name="datefilter"]').daterangepicker({
    showDropdowns : true,
autoUpdateInput: false,
locale: {
    cancelLabel: 'Clear'
}
});

$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
$(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
var startDate = picker.startDate.format('YYYY-MM-DD');
var endDate = picker.endDate.format('YYYY-MM-DD');
if (startDate != '' && endDate != '') {
      console.log(startDate, endDate);
      var endpoint = 'https://gmlews.com/api/data/?node_id=1';

$.ajax({
method: "GET",
url: endpoint,
data: {
startDate: startDate,
endDate: endDate
},
success: function(data){
var data = data;
let filteredData = _.filter(data, function(data){ 
return (data.timestamp > startDate &&  
    data.timestamp < endDate)
});
console.log(filteredData);
} //function(data)end
}) //ajax end
} //if function end

$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
$(this).val('');
});

}); //apply button end
//download button
$("#button1").on('click', function(e) {
// JSON to CSV Converter
    function ConvertToCSV(objArray) {
        var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
        var str = '';

        for (var i = 0; i < array.length; i++) {
            var line = '';
            for (var index in array[i]) {
                if (line != '') line += ','

                line += array[i][index];
            }

            str += line + '\r\n';
        }

        return str;
    }

    // Example
    $(document).ready(function () {

        // Create Object
        var filteredData = filteredData;

        // Convert Object to JSON
        var jsonObject = JSON.stringify(filteredData);


        // Convert JSON to CSV & Display CSV
        $('#button1').onclick(ConvertToCSV(jsonObject));
    });
})

}); //js function end

Answer 1

代码中的问题是 "filteredData" 的变量引用之间的简单差异，因为它是在多个不同的范围内定义的，没有对它应该是的主要范围的全局引用，之后ajax 呼叫已发出。其次后面#button1的onclick事件有出入，只需要定义一次即可。 The following code 能够在选择日期后至少生成一个 JSON 字符串，将其放入 CSV 文件很简单，只需将数组映射到逗号分隔值并将其字符串化即可。不管怎样：

$(function() {

$('input[name="datefilter"]').daterangepicker({
        showDropdowns : true,
    autoUpdateInput: false,
    locale: {
        cancelLabel: 'Clear'
    }
});
let filteredData;
$('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
var startDate = picker.startDate.format('YYYY-MM-DD');
var endDate = picker.endDate.format('YYYY-MM-DD');
if (startDate != '' && endDate != '') {
          console.log(startDate, endDate);
          var endpoint = 'https://gmlews.com/api/data/?node_id=1';

$.ajax({
  method: "GET",
  url: endpoint,
  data: {
    startDate: startDate,
    endDate: endDate
  },
  success: function(data){
  var data = data;
  filteredData = _.filter(data, function(data){ 
    return (data.timestamp > startDate &&  
        data.timestamp < endDate)
});
console.log(filteredData);
} //function(data)end
}) //ajax end
} //if function end

$('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
    $(this).val('');
});

}); //apply button end
//download button
$("#button1").on('click', function(e) {
// JSON to CSV Converter
        function ConvertToCSV(objArray) {
     //   console.log(typeof objArray, objArray)
            var array = typeof objArray != 'object' ? JSON.parse(objArray) : objArray;
      //      console.log("YO", array)
            var str = '';

            for (var i = 0; i < array.length; i++) {
                var line = '';
                for (var index in array[i]) {
                    if (line != '') line += ','

                    line += array[i][index];
                }

                str += line + '\r\n';
            }

            return str;
        }
        var jsonObject = JSON.stringify(filteredData);
     
    var csv = ConvertToCSV(jsonObject)
         var a = document.createElement("a")
         var blob = new Blob([csv])
         a.download = "test.csv"
         a.href = URL.createObjectURL(blob);
         a.click();
    
})

}); //js function end

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>


<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.9.1/underscore-min.js"></script>

<script type="text/javascript" src="https://github.com/douglascrockford/JSON-js/raw/master/json2.js"></script>



    <ol class="breadcrumb">data from date : <input type="text" name="datefilter" value="" /></ol>
    <p>Click this button to download all data from node 1</p>
  <div>
    <button id="button1" class="button"><span>Download</span></button>
  </div>

Answer 2

这应该有效：https://jsfiddle.net/maxim_mazurok/m23x7n04/16/

详细了解 JavaScript Scope

这是主要问题：

var filteredData = filteredData;

Answer 3

这是一个工作脚本，

我做了什么？

删除了按钮周围的document.ready，它已经在document.ready
在实际过滤数据之前禁用该按钮
从各个地方删除了 filteredData 变量并使其成为全局变量
找到 JSON2 的 CDN
创建了更好的 csv 转换器（引用字符串）
删除了下划线和 JSON2

let filteredData;
const ConvertToCSV = data => {
  if (!data || data.length === 0) { 
    console.log("data was empty");
    return;
  }
  let csv = [Object.keys(data[0]).slice(0).join(",")];
  data.forEach(
    item => csv.push(
      Object.values(item).map(val => isNaN(val) ? '"'+val+'"':val).join(",")
    )
  )
  csv=csv.join("\n");
  console.log(csv);
  const $link = $('<a/>',{ href: "data:text/csv;charset=utf-8,"+escape(csv), download:"filename.csv",text:"download"});
 
  $link[0].click(); // have to trigger native click
};
$(function() {

  $('input[name="datefilter"]').daterangepicker({
    showDropdowns: true,
    autoUpdateInput: false,
    locale: {
      cancelLabel: 'Clear'
    }
  });

  // Convert JSON to CSV & Display CSV
  $('#button1').on("click", function() {
    if (filteredData) ConvertToCSV(filteredData)
    else alert("Please get data first");
  }).prop("disabled", true);


  $('input[name="datefilter"]').on('apply.daterangepicker', function(ev, picker) {
    $(this).val(picker.startDate.format('YYYY-MM-DD') + ' - ' + picker.endDate.format('YYYY-MM-DD'));
    var startDate = picker.startDate.format('YYYY-MM-DD');
    var endDate = picker.endDate.format('YYYY-MM-DD');
    if (startDate != '' && endDate != '') {
      console.log(startDate, endDate);
      var endpoint = 'https://gmlews.com/api/data/?node_id=1';

      $.ajax({
        method: "GET",
        url: endpoint,
        data: {
          startDate: startDate,
          endDate: endDate
        },
        success: function(data) {
          filteredData = data.filter(item => item.timestamp > startDate && item.timestamp < endDate)
           console.log(filteredData);
           $('#button1').prop("disabled",false);
        } //function(data)end
      }) //ajax end
    } //if function end

    $('input[name="datefilter"]').on('cancel.daterangepicker', function(ev, picker) {
      $(this).val('');
    });

  }); //apply button end
  //download button

}); //js function end

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />


<ol class="breadcrumb">data from date : <input type="text" name="datefilter" value="" /></ol>
<p>Click this button to download all data from node 1</p>
<div>
  <button id="button1" type="button" class="button"><span>Download</span></button>
</div>

测试：

2020-05-03 - 2020-05-12

id,timestamp,vibration,moisture,gps_latitude,gps_longitude,gyro_x,gyro_y,gyro_z,accelero_x,accelero_y,accelero_z,displacement,node_id
83,2020-05-07T15:16:31.458380+07:00,2,30,-7.758856,110.376388,0.234,0.083,0.548,0.47,0.23,0.83,4,1
84,2020-05-07T21:14:19.171388+07:00,2,30,-7.758456,110.376388,0.34,0.83,0.48,0.47,0.23,0.83,4,1

如何从 JSON 数据下载 CSV 文件？

How to download CSV file from JSON data?

javascript

json

export-to-csv