Javascript 将CSV转换为JSON并使用JS将JSON放入html表_Javascript_Html_Json_Csv

Javascript 将CSV转换为JSON并使用JS将JSON放入html表

javascript html json csv

Javascript 将CSV转换为JSON并使用JS将JSON放入html表,javascript,html,json,csv,Javascript,Html,Json,Csv,我有以下问题：我需要用一个大学项目的CSV文件中的一些数据填充一个HTML表，我们只允许使用香草JavaScript。在过去的三天里，我一直在尝试这一点，查看用于将CSV解析为JSON的代码，然后用它构建一个表。我编写的代码如下所示： <script type="text/javascript"> $.ajax({ url: 'world_data_v1.csv', dataType: 'text'

我有以下问题：

我需要用一个大学项目的CSV文件中的一些数据填充一个HTML表，我们只允许使用香草JavaScript。在过去的三天里，我一直在尝试这一点，查看用于将CSV解析为JSON的代码，然后用它构建一个表。我编写的代码如下所示：

<script type="text/javascript">
        $.ajax({
            url: 'world_data_v1.csv',
            dataType: 'text',
        }).done(csvToJSON);

        function csvToJSON(data){
            var table_lines = data.split("\n");
            var results = [];
            var headers = table_lines[0].split(",");

            for(var x=1; x<table_lines.length; x++){
                var content = {};
                var current_line = tabel_lines[x].split(",");
                for(var y=1; y<headers.length; y++){
                    content[headers[y]] = current_line[y];
                }
                results.push(content);
            }
            return results;
        }
        function buildHtmlTable() {
            var data = results;
            var table = document.createElement("table");
            table.border = "1";

            var tableLength = data[0].length;
            var row = table.insertRow(-1);
            for (var i = 0; i<tableLenght; i++) {
                var header = document.createElement("th");
                header.innerHTML = data[0][i];
                row.appendChild(header);
            }
            
            for (var i; i<results.length; i++){
                row = table.insertRow(-1);
                for (var x=0; x<tableLength; x++){
                    var cell = row.insertCell(-1);
                    cell.innerHTML = data[i][x];
                }
            }
        }
        var table = document.getElementById("Table");
        table.innerHTML ="";
        table.appendChild(table);
    </script>

id ,name ,birth rate per 1000,cell phones per 100,children per woman,electricity consumption per capita,gdp_per_capita,gdp_per_capita_growth,inflation annual,internet user per 100,life expectancy,military expenditure percent of gdp,gps_lat      ,gps_long 001,Brazil ,16.405 ,90.01936334 ,1.862  ,2201.808724                       ,4424.758692   ,-1.520402823 ,8.228535058  ,39.22 ,74             ,1.615173655 ,-14.235004000,-51.925280000002,Canada  ,10.625             ,70.70997244  ,1.668  ,15119.76414 ,25069.86915   ,-3.953353186         ,2.944408564     ,80.17086651 ,80.9 ,1.415710422                        ,56.130366000 ,-106.346771000003,Chile ,15.04  ,97.01862561        ,1.873 ,3276.06449  ,6451.631126  ,-2.610485847 ,7.47050527  ,38.8  ,78.8 ,3.064076139 ,-35.675147000,71.542969000

它目前不起作用，作为一个JS新手，我被卡住了

编辑：我注意到我使用了一些jQuery代码，这显然不是普通的JS。我将找到一种不用jQuery加载csv的方法。

下面介绍如何从文件中加载csv数据，而不是使用AJAX调用。如果您需要进行AJAX调用，请查看，这是纯JS

<!DOCTYPE html>
<html>
<body>

<h1>Load CSV file</h1>

  <input type="file" id="myfile" name="myfile" onchange="readfile()">
  <table id="_table">
</table>
<script>
function appendJsonToTable(jsonArray){
    const headersHtml = Object.keys(jsonArray[0]).map(h => `<th>${h}</th>`).join('')
    const tableHtml = jsonArray.map(row => {
        const columns = Object.values(row);
        const columnsInTable = columns.map(c => `<td>${c}</td>`).join('')
        return `<tr>${columnsInTable}</tr>`;
    }).join('')
    const table = document.getElementById("_table");
    console.log('tableHtml:', tableHtml);
    table.innerHTML = [headersHtml, tableHtml].join('');
}
function csvToJSON(csvDataString){
    const rowsHeader = csvDataString.split('\r').join('').split('\n')
    const headers = rowsHeader[0].split(',');
    const content = rowsHeader.filter((_,i) => i>0);
    console.log('Headers: ',headers);
    const jsonFormatted = content.map(row => {
        const columns = row.split(',');
        return columns.reduce((p,c, i) => {
            p[headers[i]] = c;
            return p;
        }, {})
    })
    console.log('jsonFormatted:',jsonFormatted);
    // here you have the JSON formatted
    return jsonFormatted;
}
function readfile(e){
    var file = document.getElementById("myfile").files[0];
    const reader = new FileReader();
    reader.addEventListener('load', e => {
        const csvData = e.target.result.toString();
        console.log('CSV Data:', csvData);
        appendJsonToTable(csvToJSON(csvData))
    })
    reader.readAsText(file, 'UTF-8')
}
</script>
</body>
</html>


加载CSV文件
函数AppendJsonTable（jsonArray）{
const headerstml=Object.keys（jsonArray[0]）.map（h=>`${h}`）。join（“”）
const tableHtml=jsonArray.map（行=>{
常量列=对象值（行）；
const columnsInTable=columns.map（c=>`${c}`）。连接（“”）
返回`${columnsInTable}`；
}).加入（“”）
const table=document.getElementById（“_table”）；
log（'tableHtml:'，tableHtml）；
table.innerHTML=[headersHtml，tableHtml].join（“”）；
}
函数csvToJSON（csvDataString）{
const rowsHeader=csvDataString.split（'\r'）.join（''）.split（'\n'））
const headers=rowsHeader[0]。拆分（'，'）；
const content=rowsHeader.filter（（（uu，i）=>i>0）；
log（'Headers:'，Headers）；
const jsonFormatted=content.map（行=>{
const columns=row.split（'，'）；
返回列.reduce（（p，c，i）=>{
p[headers[i]]=c；
返回p；
}, {})
})
log（'jsonFormatted:'，jsonFormatted）；
//这里是JSON格式的
返回jsonFormatted；
}
函数读取文件（e）{
var file=document.getElementById（“myfile”）.files[0]；
const reader=new FileReader（）；
reader.addEventListener（'load'，e=>{
const csvData=e.target.result.toString（）；
console.log（'CSV数据：'，csvData）；
附录本体表（csvToJSON（csvData））
})
reader.readAsText（文件“UTF-8”）
}

为了在HTML表中使用数据，将CSV解构为嵌套数组与表更加兼容，因为它实际上是一种表数据格式

但是，您可以使用上面的方法使用字符串文本而不是DOM操作来构建HTML表，这对静态DOM有更多的控制，并且对于在普通JS上呈现静态非常有用。

您说的“当前不工作”是什么意思？是否有任何错误消息？json是什么样子？@JuleWolf我在buildHtmlTable函数中犯了一个新手错误，因为它不需要参数，所以它无法构建一个表，因为它没有任何数据来构建一个表。目前正在修复。是否需要先将其转换为json？您可以直接使用csv生成他们建议我们进行转换的表格。