Не могу разобраться с результатом парсинга библиотеки PapaParse

97
31 мая 2021, 15:10
  1. Есть файл формата CSV
1-я строка - заголовок (ключи)
...
остальные строки - данные (значения)
  1. Для парсинга файла использую библиотеку PapaParse. Фрагмент кода из библиотеки:

// Затем записываем данные 
for (var row = 0; row < data.length; row++) { 
  var maxCol = hasHeader ? fields.length : data[row].length; 
 
  var emptyLine = false; 
  var nullLine = hasHeader ? Object.keys(data[row]).length === 0 : data[row].length === 0; 
  if (skipEmptyLines && !hasHeader) { 
    emptyLine = skipEmptyLines === 'greedy' ? data[row].join('').trim() === '' : data[row].length === 1 && data[row][0].length === 0; 
  } 
  if (skipEmptyLines === 'greedy' && hasHeader) { 
    var line = []; 
    for (var c = 0; c < maxCol; c++) { 
      var cx = dataKeyedByField ? fields[c] : c; 
      line.push(data[row][cx]); 
    } 
    emptyLine = line.join('').trim() === ''; 
  } 
 
  if (!emptyLine) { 
    for (var col = 0; col < maxCol; col++) { 
      if (col > 0 && !nullLine) 
        csv += _delimiter; 
      var colIdx = hasHeader && dataKeyedByField ? fields[col] : col; 
      csv += safe(data[row][colIdx], col); 
    } 
    if (row < data.length - 1 && (!skipEmptyLines || (maxCol > 0 && !nullLine))) { 
      csv += _newline; 
    } 
  } 
} 
return csv; 
}

  1. Результат работы библиотеки (взят из консоли):
Arguments
0: {…}
data: (9) […]
0: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:18", VarValue: "0", … }
1: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:23", VarValue: "0", … }
2: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:28", VarValue: "0", … }
3: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:33", VarValue: "0", … }
4: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:38", VarValue: "0", … }
5: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:44", VarValue: "0", … }
6: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:49", VarValue: "0", … }
7: Object { VarName: "DI_valve_opened", TimeString: "29.05.2019 16:42:54", VarValue: "0", … }
8: Object { VarName: "" }
length: 9           ​​​
<prototype>: Array []
            ​​
errors: Array [ {…} ]
meta: Object { delimiter: ";", linebreak: "\r\n", aborted: false, … }
<prototype>: Object { … };
  1. Хочу вывести в консоль значения по ключу VarValue. Моя ошибка заключается в том, что не правильно указываю свойство data.VarValue.
for (var i = 0; i <= Arguments.data.VarValue.length-1; i++) {
  // if (Arguments.data.VarValue[i].hasOwnProperty(key)) {
  //i = индекс
  //значение = Arguments.data.VarValue[i]
  console.log("Элемент массива[ "+ i +" ] = " + Arguments.data.VarValue[i]);  
}
  1. Хочу, чтобы выводилось в консоли так:
Элемент массива [0] = Значение 1;
Элемент массива [1] = Значение 2;
Элемент массива [2] = Значение 3;

Вот функция, которая выводит массив объектов в консоль:

function completeFn()
{
    end = performance.now();
    if (!$('#stream').prop('checked')
            && !$('#chunk').prop('checked')
            && arguments[0]
            && arguments[0].data)
        rows = arguments[0].data.length;
    console.log("Finished input (async). Time:", end-start, arguments);
    console.log("Rows:", rows, "Stepped:", stepped, "Chunks:", chunks);
}

Если я изменю строку:

console.log("Finished input (async). Time:", end-start, arguments);

На строку:

console.log("Элемент массива", arguments[0].data[0].VarValue);

То в консоли выводится необходимое значение. Теперь надо, чтобы прочитались все значения arguments[0].data[i].VarValue

Добавляю код:

  for(let i=0;i<arguments.data[i].length;i++)
    {console.log("Элемент массива["+i+"]="+arguments.data[i].VarValue);}

Консоль ругается на неизвестность arguments.

Answer 1

Возможно, что данный пример позволит вам понять, что происходит и как работать с результатом парсинга.

// Элемент для выбора файлов. 
const INPUT = document.querySelector('input[name="readable"]'); 
 
// Элемент для вывода сгенерированной таблицы. 
const PREVIEW = document.querySelector('#preview'); 
 
// Регулярное выражение для проверки расширения файла. 
const REGEX = new RegExp('(.*?)\.(csv)$', 'i'); 
 
// Настройки для плагина PapaParse. 
// https://www.papaparse.com/docs#config 
const CONFIG = { 
 
} 
 
// Регистрируем функцию обработчика события `change`, 
// срабатывающего при изменении элемента выбора файла. 
INPUT.addEventListener('change', handleFile); 
 
// Функция, отрабатывающая при выборе файла. 
function handleFile(event) { 
  // Выбираем первый файл из списка файлов. 
  const file = event.target.files[0]; 
 
  // Если файл выбран и его расширение допустимо, 
  // то читаем его содержимое и отправляем 
  // в функцию отрисовки таблицы. 
  if (file && REGEX.test(file.name)) { 
    // Парсим содержимое файла 
    // при помощи библиотеки PapaParse. 
    // https://www.papaparse.com/docs#results 
    Papa.parse(file, { 
      complete: function(results) { 
        // console.log(results); 
        // Массив данных. 
        const data = results.data; 
        // Массив ошибок. 
        const errors = results.errors; 
        // Объект с дополнительной информацией 
        const meta = results.meta; 
 
        // Отправляем полученные данные 
        // на отрисовку таблицы. 
        renderTable(data); 
      } 
    }, CONFIG); 
  } else { 
    // Мизерная обработка ошибок. 
    alert('Файл не выбран либо его формат не поддерживается.'); 
    event.target.value = ''; 
  } 
} 
 
// Функция отрисовки таблицы. 
function renderTable(data) { 
  // Предварительно создадим элементы, 
  // отвечающие за каркас таблицы. 
  const table = document.createElement('table'); 
  const thead = document.createElement('thead'); 
  const tbody = document.createElement('tbody'); 
 
  // Добавим класс к таблице. 
  table.classList.add('table'); 
 
  // Перебираем полученный массив. 
  data.forEach(function(row, index) { 
    // Создадим элемент строки для таблицы. 
    const trow = document.createElement('tr'); 
 
    // Перебираем полученный массив будущих ячеек. 
    row.forEach(function(cell) { 
      // Создадим элемент ячейки для таблицы. 
      const tcell = document.createElement(index > 0 ? 'td' : 'th'); 
      // Заполним содержимое ячейки. 
      tcell.textContent = cell; 
      // Добавляем ячейку к родительской строке. 
      trow.appendChild(tcell); 
    }); 
 
    // Добавляем строку к родительскому элементу. 
    // Если индекс строки больше нуля, 
    // то родительский элемент - `tbody`, 
    // в противном случае- `thead`. 
    index > 0 ? tbody.appendChild(trow) : thead.appendChild(trow); 
  }); 
 
  // Добавляем заголовок таблицы к родительскому элементу. 
  table.appendChild(thead); 
  // Добавляем тело таблицы к родительскому элементу. 
  table.appendChild(tbody); 
 
  // Очищаем элемент для вывода таблицы. 
  PREVIEW.innerHTML = ''; 
  // Добавляем саму таблицу к родительскому элементу. 
  PREVIEW.appendChild(table); 
}
<div id="app"> 
  <input type="file" name="readable" accept=".csv" /> 
 
  <div id="preview"></div> 
</div> 
 
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" rel="stylesheet"> 
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.0.2/papaparse.min.js"></script>

READ ALSO
Словари JS и глобальные переменные

Словари JS и глобальные переменные

хочу передать переменную windowglobalVar из функции(функция меняет значение переменной при наведении на элемент), но не получается не могу понять...

118
Адекватный ли код я пишу?

Адекватный ли код я пишу?

Ребята, я тут практикуюсь с Promise в jsИ решил написать функцию tree

79
Добавить класс кнопке при клике

Добавить класс кнопке при клике

В id="convert-json-to-html-tree-sets" подгружаю форму с инпутами и кнопками к каждому инпуту

101