Как мне прочитать файл cvs в javascript и сохранить его в карте?

Question

скажем, если у меня есть CSV-файл с:

Заголовок 1, Заголовок 2, Заголовок 3

Значение 1, Значение2, Значение 3

Все, что я хочу, это создать карта, в которой заголовок 1 хранится как ключ, а заголовок 2 - как значение;

как map.set (значение1, значение2)

Как мне это сделать, пока я читаю файл в javascript ?

function processData(allText) {
    var allTextLines = allText.split("\r");

    for (var i=1; i<allTextLines.length; i++) {
        var data = allTextLines[i].split(',');
        console.log(data[0]);
        map1.set(data[0] , data[1]);
        }
    }

Пока я пытался это сделать. Но это не работает. Он не читает файл вообще. Любая помощь приветствуется. Спасибо

Answer 1

Если у вас есть ряд элементов, разделенных запятыми (,), вы можете перебирать строку и разбивать или разбивать элементы. Это можно сделать с помощью Vanilla JavaScript. Часть magi c - это петля for(); итерирование по 2 вместо 1, что чаще всего наблюдается.

$(function() {
  var myString = "Header 1,Value 1,Header 2,Value 2,Header 3,Value 3";

  var parts = myString.split(",");

  var myData = {};
  for (var i = 0; i < parts.length; i += 2) {
    myData[parts[i]] = parts[i + 1];
  }
  
  console.log(myData);
});

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

Если ваш файл состоит из нескольких строк, а первая строка содержит заголовки, например:

Header 1,Header 2,Header 3
Value 1,Value 2,Value 3
Value 4,Value 5,Value 6

Вам придется обработать это по-другому. Когда он введен в JS, это будет одна большая строка, и вам придется сначала разделить ее по концу строки (EOL). Это создаст массив строк, который должен быть повторен. Вам нужно будет создать массив ключей, а затем матрицу значений.

Поскольку файл является локальным, вам необходимо сначала получить файл от пользователя. Это обсуждается здесь: Как читать данные из файла * .CSV, используя javascript? и здесь: Чтение в локальном файле CSV в javascript? Вам необходимо определить лучший способ для себя.

Одним из способов является использование файлового ввода. Есть недостатки и предостережения из-за безопасности и браузеров, но это может сработать.

$(function() {
  var fileInput = $("#getFile");

  function toObj(keys, vals) {
    var obj = {};
    for (var i = 0; i < keys.length; i++) {
      obj[keys[i]] = vals[i];
    }
    return obj;
  }

  function stringToObject(str, header) {
    if (header == undefined) {
      header = false;
    }
    var lines = str.split("\n");
    var k = [],
      m = [];
    if (header) {
      k = lines.splice(0, 1);
      k = k[0].split(",");
    }
    $.each(lines, function(i, el) {
      if (el.length) {
        m.push(el.split(","));
      }
    });
    if (k.length) {
      var r = [];
      $.each(m, function(i, el) {
        r.push(toObj(k, el));
      });
      return r;
    } else {
      return m;
    }
  }

  function readFile() {
    var reader = new FileReader();
    reader.onload = function() {
      var newData = stringToObject(reader.result, $("#header").prop("checked"));
      console.log(newData);
      $("#out").html("" + reader.result + "

");}; reader.readAsBinaryString (fileInput [0] .files [0]);}; fileInput.change (readFile);});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="file input">
  <input type="checkbox" id="header" checked="checked"> <label>CSV Header</label><br />
  <input type="file" id="getFile" />
</div>
<div id="out"></div>