Papa parse returns Data array in which everything is converted to string

Question

I am parsing .CSV to Papa.parse with React, i am getting output something like this:

[
  {Year: "1929", BMW: "1896", Toyots: "9547", Mercedes: "4881"},
  {Year: "1930", BMW: "6548", Toyots: "4741", Mercedes: "8096"},
  {Year: "1931", BMW: "5013", Toyots: "6269", Mercedes: "3908"},
  {Year: "1932", BMW: "2468", Toyots: "9858", Mercedes: "1623"},
  {Year: "1933", BMW: "3364", Toyots: "5595", Mercedes: "8638"},
  {Year: "1934", BMW: "2032", Toyots: "2570", Mercedes: "8041"},
  {Year: "1935", BMW: "3579", Toyots: "6886", Mercedes: "6938"},
  {Year: "1936", BMW: "2865", Toyots: "3336", Mercedes: "1996"}
]

The problem is Papa.parse coverts everything to string under double quotation mark!

How can we convert back them to number? (if they were number in their original form! Problem is that some of the Field may not have number type, say location or address or name: they are string typo)

Or Is there any configuration for preventing Papa.parse to do so?

Grewitz

in a csv file, everything are treated as strings. you will have to manually convert them back to their "native" types. – Mignonne

try to remove the double quotation in the csv for numbers – Hillier

Possible duplicate of How do I convert a string into an integer in JavaScript? – Flagon

@Flagon Sorry, but my problem was different and i got the solution, thank you. – Grewitz

Answer 1

Enable the dynamicTyping option to retain numbers:

const csv = "Year,BMW,Toyota,Mercedes,Location\n1929,1896,9547,4881,Germany"
const csvData = Papa.parse(csv, {header:true, dynamicTyping: true}).data

console.log(typeof csvData[0].Year);
console.log(typeof csvData[0].Location);

<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/4.5.0/papaparse.min.js">
</script>

Plasmagel

this is correct answer. user don't need to do .map, isNan and so on, this handled by the library – Gheber

Answer 2

You can use map() to transform the array items into number:

var papa =[
{Year: "1929", BMW: "1896", Toyots: "9547", Mercedes: "4881"},
{Year: "1930", BMW: "6548", Toyots: "4741", Mercedes: "8096"},
{Year: "1931", BMW: "5013", Toyots: "6269", Mercedes: "3908"},
{Year: "1932", BMW: "2468", Toyots: "9858", Mercedes: "1623"},
{Year: "1933", BMW: "3364", Toyots: "5595", Mercedes: "8638"},
{Year: "1934", BMW: "2032", Toyots: "2570", Mercedes: "8041"},
{Year: "1935", BMW: "3579", Toyots: "6886", Mercedes: "6938"},
{Year: "1936", BMW: "2865", Toyots: "3336", Mercedes: "1996"}
];

papa = papa.map(item => {
  item.Year = Number(item.Year);
  item.BMW = Number(item.BMW);
  item.Toyots = Number(item.Toyots);
  item.Mercedes = Number(item.Mercedes);
  return item;
});
console.log(papa);

You might be interested in the following approach as well:

var papa = [
  {Year: "1929", BMW: "1896", Toyots: "9547", Mercedes: "4881", Status : "Test"},
  {Year: "1930", BMW: "6548", Toyots: "4741", Mercedes: "8096"},
  {Year: "1931", BMW: "5013", Toyots: "6269", Mercedes: "3908"},
  {Year: "1932", BMW: "2468", Toyots: "9858", Mercedes: "1623"},
  {Year: "1933", BMW: "3364", Toyots: "5595", Mercedes: "8638"},
  {Year: "1934", BMW: "2032", Toyots: "2570", Mercedes: "8041"},
  {Year: "1935", BMW: "3579", Toyots: "6886", Mercedes: "6938"},
  {Year: "1936", BMW: "2865", Toyots: "3336", Mercedes: "1996"}
];

papa = papa.map(item => {
  Object.keys(item).forEach(k => item[k] = isNaN(item[k])? item[k] : Number(item[k]));
  return item;
});
console.log(papa);

Pierette

Answer 3

Make use of isNaN to check number if so then return parse that number string else return as it is.

var papa =[
{Year: "1929", BMW: "1896", Toyots: "9547", Mercedes: "4881","location":"pune"},
{Year: "1930", BMW: "6548", Toyots: "4741", Mercedes: "8096"},
{Year: "1931", BMW: "5013", Toyots: "6269", Mercedes: "3908"},
{Year: "1932", BMW: "2468", Toyots: "9858", Mercedes: "1623"},
{Year: "1933", BMW: "3364", Toyots: "5595", Mercedes: "8638"},
{Year: "1934", BMW: "2032", Toyots: "2570", Mercedes: "8041"},
{Year: "1935", BMW: "3579", Toyots: "6886", Mercedes: "6938"},
{Year: "1936", BMW: "2865", Toyots: "3336", Mercedes: "1996"}
];

papa = papa.map(item => {
  const keys = Object.keys(item);
  let newObj={}
  keys.map((m)=>{
      newObj[m] = isNaN(item[m]) ? item[m] : parseInt(item[m])
  })
  return newObj
});
console.log(papa);

Maharajah

Answer 4

For new comers: You can use papa.parse transform method.

 Papa.parse(fileUpload.file, {
        download: true,
        header: true,
        dynamicTyping: true,
        transform: (value: string) => removeQuotes(value)}
)



export function removeQuotes(str: string) {
    if ((str.startsWith('"') && str.endsWith('"')) || (str.startsWith("'") && str.endsWith("'"))) {
        return str.slice(1, -1); // Remove the first and last character
    }
    return str;
}

Gardol