PapaParse возвращает неопределенное значение при чтении CSV

Моя цель - открыть файл CSV, а затем проанализировать его содержимое на <div> используя PapaParse. Пока что он работает, но вместо реальных значений он просто возвращает неопределенное значение. Я понятия не имею, что не так, может быть странный файл CSV (я сделал это из таблицы Excel с помощью Save As), или это может быть просто небрежное кодирование.

JS

var data;

function handleFileSelect(evt) {
    var file = evt.target.files[0];

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            data = results;
        }
    });
    $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
}

$(document).ready(function () {
    $("#csv-file").change(handleFileSelect);
});

HTML

<div class="graphcontainer">Parser Output:</div>
<div class="buttoncontainer">
    <input type="file" id="csv-file" name="files"/>
</div>

редактировать: вот файлы, с которыми я тестировал ( http://www.topdeckandwreck.com/excel%20graphs/). Не знаю, действительно ли это актуально, так как цель состоит в том, чтобы пользователь мог открыть любой файл CSV и затем сделать из него график:)

Источник

4 ответа

Решение

Скорее всего, у вас есть проблемы со временем.

Папа - это асинхронная библиотека, контрольным признаком является тот факт, что она предлагает complete Перезвоните.

Это означает, что вы не можете использовать глобальную переменную для передачи ее результатов от A к B. На самом деле, вы должны избегать глобальных переменных в целом.

Вся работа, которую вы хотите выполнить после того, как результат будет готов, должна быть выполнена в функции обратного вызова. Это относится к любому асинхронному процессу в JavaScript.

function handleFileSelect(evt) {
    if ( !(evt.target && evt.target.files && evt.target.files[0]) ) {
        return;
    }    
    Papa.parse(evt.target.files[0], {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            debugDataset(results);
            renderDataset(results);
        }
    });
}

function debugDataset(dataset) {
    var formatted = JSON.stringify(dataset, null, 2);
    $("<div class='parse'></div>").text(formatted).appendTo(".graphcontainer");
}

function renderDataset(dataset) {
    // render code here...
}

$(function () {
    $("#csv-file").change(handleFileSelect);
});
Источник

Я думаю, что вы хотите увидеть результаты, когда они на самом деле завершены:

function handleFileSelect(evt) {
    var file = evt.target.files[0];

    Papa.parse(file, {
        header: true,
        dynamicTyping: true,
        complete: function (results) {
            var data = results;
            $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
        }
    });
}
Источник

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

      async getData() {
    return await new Promise((resolve, reject) => {
        try {
            Papa.parse(
                `${ window.location.protocol }//${ window.location.host }/data/myfile.csv`, 
                {
                    download: true,
                    worker: true,
                    header: true,
                    complete: function(r) {
                        resolve(r.data);
                    }
                }
            )
        }
        catch (e) {
            reject(e);
        }
    });
}
Источник

Итак, я решил проблему, решение таково (var должен содержать results.data)

{

function handleFileSelect(evt) {
    var file = evt.target.files[0];

    Papa.parse(file, {
        complete: function (results) {
            var data = results.data;
            $(".graphcontainer").append("<div class='parse'>" + data + "</div>");
        }
    });
}

$(function () {
    $("#csv-file").change(handleFileSelect);
});

}

спасибо за помощь от других

Источник
Другие вопросы по тегам