访问 JQuery-CSV 对象并将其格式化为 txt 文件

Posted 2023-05-08

【中文标题】访问 JQuery-CSV 对象并将其格式化为 txt 文件

【英文标题】：Acessing JQuery-CSV Object and formatting it into a txt file

【发布时间】：2021-01-01 15:34:30

【问题描述】：

我有一个包含大量信息（58 列）的传入 txt/csv 文件，基本上我需要处理一些信息（只是姓名和电话号码）。所以我必须能够获取全部信息，从中检索我需要的内容，然后对其进行格式化。

为了获取全部信息，我使用了terales answer，它可以上传文件。 要处理我正在使用此库JQuery-CSV 的信息，这将读取文件内容并将其转换为 JSON 对象，我在这一点上被困住了。我有这个对象，但我无法根据需要访问它，因此我无法格式化它来编写一个新的 txt 文件。我可能在文档中遗漏了一些东西，这应该是非常直接的。这是我的代码示例：

HTML

<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">
<link rel="stylesheet" href="demo.css">

<div class="row" style="margin-bottom:8px;position:relative;">
    <h2>Contacts</h2>
    <div class="col-md-12">
        <label for="input-file">Select your file:</label><br>
        <input type="file" id="input-file">
        <input id="run" type="button" value="Format" />
    </div>
</div>


<textarea id="content-target"></textarea>
<textarea id="result"></textarea>

<script src="http://code.jquery.com/jquery-3.3.1.slim.js" integrity="sha256-fNXJFIlca05BIO2Y5zh1xrShK3ME+/lYZ0j+ChxX2DA=" crossorigin="anonymous"></script>
<script src="http://typeiii.github.io/jquery-csv/src/jquery.csv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/highlight.min.js"></script>
<script src="jquery-csv.js"></script>

JS

<script>

    $("#content-target").hide();
    $("#result").hide();
    $("#run").hide();
    document.getElementById('input-file').addEventListener('change', getFile)

    function getFile(event) 
        const input = event.target
        if ('files' in input && input.files.length > 0) 
            placeFileContent(
                document.getElementById('content-target'),
                input.files[0])
            $("#run").show();
        
    

    function placeFileContent(target, file) 
        readFileContent(file).then(content => 
            target.value = content
        ).catch(error => console.log(error))
    

    function readFileContent(file) 
        const reader = new FileReader()
        return new Promise((resolve, reject) => 
            reader.onload = event => resolve(event.target.result)
            reader.onerror = error => reject(error)
            reader.readAsText(file)
        )
    

    // enable syntax highlighting
      hljs.initHighlightingOnLoad();

      $(document).ready(() => 
        parse();
      );

      $('#run').bind('click', function () 
          parse();
          //format();
      );

      function parse() 
        const input = $('#content-target').val();
        const data = $.csv.toObjects(input);
        $('#result').empty();
        //$('#result').html(JSON.stringify(data, null, 2));
        $("#result").show();
    ;    

</script>

format() 函数将访问对象中的特定索引（我在上面提到的姓名和电话号码）并执行正则表达式操作来格式化它。但正如我所说，我无法访问这些索引，在我的具体情况下，我认为语法 data[0].Name 或类似 data[index].ColumnName一般来说应该没问题。

这是我传入数据的一个小样本：

Name;Given Name;Additional Name;Family Name;Yomi Name;Given Name Yomi;Additional Name Yomi;Family Name Yomi;Name Prefix;Name Suffix;Initials;Nickname;Short Name;Maiden Name;Birthday;Gender;Location;Billing Information;Directory Server;Mileage;Occupation;Hobby;Sensitivity;Priority;Subject;Notes;Language;Photo;Group Membership;E-mail 1 - Type;E-mail 1 - Value;E-mail 2 - Type;E-mail 2 - Value;Phone 1 - Type;Phone 1 - Value;Phone 2 - Type;Phone 2 - Value;Phone 3 - Type;Phone 3 - Value;Address 1 - Type;Address 1 - Formatted;Address 1 - Street;Address 1 - City;Address 1 - PO Box;Address 1 - Region;Address 1 - Postal Code;Address 1 - Country;Address 1 - Extended Address;Organization 1 - Type;Organization 1 - Name;Organization 1 - Yomi Name;Organization 1 - Title;Organization 1 - Department;Organization 1 - Symbol;Organization 1 - Location;Organization 1 - Job Description;Website 1 - Type;Website 1 - Value
A1 Soluções;A1;;Soluções;;;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Disp. móvel;8006009510;;;;;;;;;;;;;;;;;;;;;;;
Adelson;Adelson;;;;Adelson;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Disp. móvel;027 99978-1045;;;;;;;;;;;;;;;Aluguel da Casa;;;;;;;;
Admilson;Admilson;;;;;;;;;;;;;;;;;;;;;;;;;;;* myContacts;;;;;Mobile;033 98888-1078;;;;;;;;;;;;;;;Paroquia Sagrado Coração de Jesus;;Bingo;;;;;;

【参考方案1】：

异步调用存在一些问题。我修复了你的代码，因为只有当异步函数结束时（即：fileReader.onload）你才能继续：

$("#content-target").hide();
$("#result").hide();
$("#run").hide();
document.getElementById('input-file').addEventListener('change', getFile)

function getFile(event) 
  const input = event.target
  if ('files' in input && input.files.length > 0) 
      var fileReader = new FileReader();
      fileReader.onload = function(fileLoadedEvent) 
          //
          //  only after you read the file you can go on with the data...
          //
          var textFromFileLoaded = fileLoadedEvent.target.result;
          $("#content-target").text(textFromFileLoaded).show();
          $("#run").show();
          parse();
      
      fileReader.readAsText(input.files[0], "UTF-8");
  





 function parse() 
    const input = $('#content-target').text();
    const data = $.csv.toObjects(input, "separator": ";");
    $('#result tbody').empty();
    data.forEach(function (e) 
        // get arguments
        var name = e.Name;
        var phoneType = e['Phone 1 - Type'];
        var phoneValue = e['Phone 1 - Value'];

        // create a row and append to the table
        $('#result tbody').append($('<tr><td>' + name + '</td><td>' + phoneType + ' </td><td>' + phoneValue + '</td></tr>'));

    );
    $("#result").show();
;

table, th, td 
    border: 1px solid black;
    border-collapse: collapse;
    width: 33%;

table 
  width: 100%;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://typeiii.github.io/jquery-csv/src/jquery.csv.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato|Roboto|Source+Code+Pro" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.6/styles/monokai.min.css">


<div class="row" style="margin-bottom:8px;position:relative;">
    <h2>Contacts</h2>

    <div class="col-md-12">
        <label for="input-file">Select your file:</label><br>
        <input type="file" id="input-file">
        <input id="run" type="button" value="Format"/>
    </div>
</div>
<textarea id="content-target"></textarea>
<table id="result">
    <thead>
    <tr>
        <th>name</th>
        <th>Phone Type</th>
        <th>Phone Value</th>
    </tr>
    </thead>
    <tbody>

    </tbody>
</table>

【讨论】：

感谢您的修复，但我仍然不知道如何访问该对象，除此之外，$('#result').html(JSON.stringify(data, null, 2))会将对象变成字符串，这对我的下一步计划不方便。关于主要问题的任何建议？

预期结果是什么？在字符串化之前，您有一个可以使用属性访问的对象......让我知道。谢谢

正如你所说，在 stringfy 之前我确实有一个对象，你是说我可以使用属性访问，我想知道如何使用这个属性，因为到目前为止我尝试过的都不起作用...（data[0].Name 或类似 data[index].ColumnName）。我现在正在使用另一种解决方案，使用 de json 字符串。但无论哪种方式，这都让我很感兴趣，我想知道如何在未来的情况下正确使用它。

@Rezik Snippet 已更新。我添加了分隔符选项，因为您的 csv 包含 ; 而不是 , 并且我添加了一个循环来为每行创建一个包含一些值的表。我希望这对你有用。告诉我谢谢

是的，这很棒！非常感谢，我现在可以继续了。