Papaparse не анализирует полные данные

Я делаю приложение для реагирования, которое извлекает и отображает некоторые данные файла CSV из общей папки. Мой реагирующий контейнер выглядит так:

import React, { Component } from 'react'
import * as Chart from "chart.js";
import { connect } from 'react-redux'
import { Bar } from 'react-chartjs-2'
import * as actions from "../actions"
import * as Papa from 'papaparse'

function mapStateToProps({stats}) {
  return {
    data: stats.data
  }
}

class Stats extends Component {
  fetchCsv(fileName) {
    return fetch(fileName).then(function (response) {
      let reader = response.body.getReader();
      let decoder = new TextDecoder('utf-8');

      return reader.read().then(function (result) {
        return decoder.decode(result.value);
      });
    });
  }

  constructor(props){
    super(props);
  }

  async componentDidMount() {

    let PlayerArray = [], BallByBallArray = [], MatchArray = [],
      PlayerMatchArray = [], SeasonArray = [], TeamArray = [];

    let PlayerMatchData = await this.fetchCsv("Player_Match.csv");

    Papa.parse(PlayerMatchData, {
      complete: function(results) {
        console.info("Finished:", results.data);
        PlayerMatchArray = results.data;
        console.info("entries.length: " + results.data.length);
      }
    });
  }

  render() {
    return (
      <div>

      </div>
    )
  }
}

export default connect(
  mapStateToProps, actions
)(Stats)

Это выборка содержимого файла Player_Match.csv с использованием функции fetchCsv асинхронно и сохранение его в переменной PlayerMatchData.

Затем PlayerMatchData анализируется papaparse. Проблема в том, что в нем файл имеет 12700 записей, а в google chrome только выборка 3776 записей.

Кроме того, как ни странно, он получает 1660 записей в firefox

Любой вклад будет оценен. :)

Редактировать: Ссылка на данные: https://www.kaggle.com/harsha547/indian-premier-league-csv-dataset#Player_Match.csv

Будет ли PlayerMatchData иметь 12700 элементов, если разделить его на \n?

Sergiu Paraschiv 23.02.2019 15:20

Он имеет 12700 строк по 5 столбцов. Но он показывает только 3776 строк по 5 столбцов в каждой. Я также прилагаю ссылку на данные в вопросе.

Shubham Gupta 23.02.2019 15:23
PlayerMatchData — это строка. В нем нет строк и столбцов. Вы можете разбить его построчно на массив строк, и вы либо получите ожидаемое количество строк 12700, либо нет. Если да, то проблема действительно где-то внутри Papa.parse. Если нет, то проблема в fetchCsv
Sergiu Paraschiv 23.02.2019 15:26

Да, в PlayerMatchData нет всех данных. Я не могу понять, почему.

Shubham Gupta 23.02.2019 15:33

Потому что reader.read() считывает из потока по одной порции за раз. developer.mozilla.org/en-US/docs/Web/API/Streams_API/…

Sergiu Paraschiv 23.02.2019 15:36

Да, это должно быть проблемой. подскажите как исправить...

Shubham Gupta 23.02.2019 16:07
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
1 066
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Итак, я получил ответ. Как сказал @SergiuParaschiv reader.read() читает только один блок данных. Поэтому вместо этого я использовал функцию fetch для выполнения задачи. В разборе проблем не было.

await fetch("Player_Match.csv")
  .then(response => response.text())
  .then(text => {
    PlayerMatchData = text;
    // console.info(text)
  })

Это сделает задачу.

Другие вопросы по теме