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

Question

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

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

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

Answer 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>

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

Acessing JQuery-CSV Object and formatting it into a txt file

jquery

json

asp.net-mvc

csv

jquery-csv