How to export the file json to CSV or XLSX format in Angularjs

DORSETRIGS

2 min read

·

07-10-2024

9

0

Share

Exporting JSON Data to CSV or XLSX in AngularJS: A Comprehensive Guide

AngularJS, a powerful framework for building dynamic web applications, often deals with data in JSON format. While JSON is great for data exchange, it's not always the most user-friendly format for presenting data. This is where exporting JSON data to CSV or XLSX files comes into play. In this article, we'll explore how to achieve this functionality in your AngularJS applications.

The Problem:

You have a dataset in JSON format within your AngularJS application and need to provide users with the ability to download this data in either CSV or XLSX format. This allows for easier data manipulation, analysis, and sharing outside the web application.

Understanding the Scenario:

Let's imagine you have an AngularJS application displaying a list of products, each with properties like name, price, and category. You want to allow users to download this product data as either a CSV or XLSX file.

Original Code (Simplified Example):

angular.module('myApp', [])
  .controller('MyCtrl', function($scope) {
    $scope.products = [
      { name: "Product A", price: 10.99, category: "Electronics" },
      { name: "Product B", price: 25.50, category: "Clothing" },
      { name: "Product C", price: 15.00, category: "Books" }
    ];
  });

Solution:

There are two main approaches to exporting JSON data to CSV or XLSX in AngularJS:

1. Using External Libraries:

   • ng-csv: This popular library simplifies the process of exporting data to CSV format.
   • xlsx: This library allows for exporting data to XLSX format (Excel).

2. Generating Data Strings Manually:

   • For CSV, you can generate a string with each row separated by commas and each column separated by newlines.
   • For XLSX, you would need to manually create the structure of the Excel file using JavaScript libraries like SheetJS.

Implementing the Solution:

Let's demonstrate using ng-csv for CSV export:

angular.module('myApp', ['ngCsv'])
  .controller('MyCtrl', function($scope, ngCsv) {
    $scope.products = [
      // ... same as before
    ];

    $scope.exportToCSV = function() {
      ngCsv.csv({ data: $scope.products, header: ['Name', 'Price', 'Category'] },
        'products.csv');
    };
  });

Explanation:

1. We inject the ngCsv service into our controller.
2. We define a exportToCSV function that uses ngCsv.csv to create the CSV data.
3. data is the array of objects we want to export.
4. header specifies the column headers.
5. 'products.csv' is the filename for the downloaded file.

Additional Insights:

• Customization: Both ng-csv and xlsx offer further customization options. For example, you can specify separators, formatting, and even merge cells.
• Performance: For large datasets, consider using data manipulation libraries like lodash to optimize performance.
• Browser Compatibility: Always test your export functionality across different browsers to ensure consistent behavior.

Conclusion:

Exporting JSON data to CSV or XLSX in AngularJS is a valuable feature for enhancing your application's usability. By leveraging external libraries or manually generating data strings, you can provide users with a convenient way to handle data outside the application.

References:

• ng-csv: https://www.npmjs.com/package/ng-csv
• xlsx: https://www.npmjs.com/package/xlsx

Further Exploration:

• SheetJS: https://sheetjs.com/
• Data Manipulation Libraries: https://lodash.com/

Remember to adapt the code and libraries to your specific needs and application structure.