Search code examples
angularjscsvlodashindexeddbpapaparse

Extra quotes when exporting to CSV and importing to IndexedDB


I'm exporting and importing an array of objects with a nested array inside, using ngCSV, loDash and PapaParse in the process.

The array looks like this:

[
    {
        arrival:"15.34.59",
        cancelled:"",
        comments:[{message: "test", commenttime: "15.34", $$hashKey: "object:552"}]
        date:"27/09/2016"
    },
    {
        arrival:"16.32.59",
        cancelled:true,
        comments:[]
        date:"27/09/2016"
    }
]

When I click the following button:

<button 
    ng-csv="commenttoJson(filteredRecords)" 
    csv-header="['date', 'comments', 'arrival', 'cancelled']" 
    filename="{{ createCsvFilename(dates) }}">
        Download
</button>

It triggers this function and downloads the file:

$scope.commenttoJson = function(filteredRecords){
    return _.map(filteredRecords, function(record){
        return _.extend({}, record, {comments: JSON.stringify(record.comments)});
    }); 
}

The resulting file looks like this:

date,comments,arrival,cancelled
27/09/2016,"[{""message"":""testing"",""commenttime"":""14.52"",""$$hashKey"":""object:50""}]",14.52.29,,
27/09/2016,[],,TRUE

Then I proceed to import it using these functions:

$scope.onFileSelect = function ($files) {
  Papa.parse($files[0], {
    header: true,
    skipEmptyLines: true,
    complete: function(results, $files,err) {
      if (err) {
          console.log('err ', err);
      }
      $scope.parseddata = results.data;
    }
  });
};

$scope.importData = function () {
  $indexedDB.openStore('records', function(store){
    store.insert($scope.parseddata).then(function(e){
      store.getAll().then(function(record) {  
        $scope.recordlist = record;
        console.log($scope.recordlist);
        $('.import-data').modal('hide');
        $scope.deleted = false;
      });
    });
  });
};

The problem is that it imports everything perfectly, except the comments, that will now look like the following, and obviously won't be read properly by the frontend:

[
    {
        arrival:"15.34.59",
        cancelled:"",
        comments:"[{"message":"test","commenttime":"15.34","$$hashKey":"object:552"}]"
        date:"27/09/2016"
    }, (...)

Obviously in the process I'm missing something, as all the extra quote marks mess my code up.

Any ideas on how to tackle this?

EDIT AND FIX

$scope.onFileSelect = function ($files) {
  Papa.parse($files[0], {
    header: true,
    skipEmptyLines: true,
    complete: function(results, $files,err) {
        if (err) {
            console.log('err ', err);
        }

    $scope.filteredRecordsToImport = _.map(results.data, function(item){
        return _.extend(item, {comments: item.comments ? JSON.parse(item.comments) : []});
    });
    console.log($scope.filteredRecordsToImport);

    }
  });
};

Apparently I had to re-parse the JSON to reverse the stringify and get rid of the extra quotes in the array!


Solution

  • $scope.onFileSelect = function ($files) {
      Papa.parse($files[0], {
        header: true,
        skipEmptyLines: true,
        complete: function(results, $files,err) {
            if (err) {
                console.log('err ', err);
            }
    
        $scope.filteredRecordsToImport = _.map(results.data, function(item){
            return _.extend(item, {comments: item.comments ? JSON.parse(item.comments) : []});
        });
        console.log($scope.filteredRecordsToImport);
    
        }
      });
    };
    

    Apparently I had to re-parse the JSON to reverse the stringify and get rid of the extra quotes in the array!