Converting JSON to CSV in React: A DIY Approach

Adan Kalla — Thu, 21 Mar 2024 02:39:16 +0000

Here's a step-by-step breakdown.

Import React:

   import React from 'react';

Define the DownloadProducts Component: Create a functional component named DownloadProducts, which takes elements as props. This component is responsible for converting the provided data into a CSV file and enabling users to download it.

   const DownloadProducts = ({ elements }) => {

Define Column Headers for CSV: Define an array fileHeaders containing the column headers for the CSV file. In this case, we have "product_name", "price", "quantity", and "total_price".

   const fileHeaders = [
     'product_name',
     'price',
     'quantity',
     'total_price'
   ];

Convert JSON to CSV Function: Define a function convertJSONToCSV that converts JSON data to a CSV-formatted string. It takes the JSON data and column headers as input and returns the CSV string.

   function convertJSONToCSV(jsonData, columnHeaders) {
     // Function body
   }

Function to Initiate CSV Download: Define a function downloadCSV to initiate the download of the CSV file when the user clicks a button. It takes JSON data and headers as input, converts the data to CSV format, creates a Blob object, and triggers the download.

   function downloadCSV(jsonData, headers) {
     // Function body
   }

Return Button Component for CSV Export: The DownloadProducts component returns a button that, when clicked, triggers the downloadCSV function. The button text reads "Export Product Data".

   return (
     <button
       onClick={() => {
         downloadCSV(elements, fileHeaders);
       }}
     >
       Export Product Data
     </button>
   );

Define Dummy JSON Data: We define a sample array dummyData containing objects representing product information. Each object has "product_name", "price", "quantity", and "total_price" fields.

   const dummyData = [
     // Sample product data objects
   ];

Export the Component with Dummy Data: We export the DownloadProducts component with the dummyData array passed as props to simulate actual product data.

   export default () => < DownloadProducts elements={dummyData} />;

Full Code:

import React from 'react';

// Define the DownloadProducts component
const DownloadProducts = ({ elements }) => {
  // Define column headers for CSV
  const fileHeaders = [
    'product_name',
    'price',
    'quantity',
    'total_price'
  ];

  // Function to convert JSON to CSV string
  function convertJSONToCSV(jsonData, columnHeaders) {
    // Check if JSON data is empty
    if (jsonData.length === 0) {
      return '';
    }

    // Create headers string
    const headers = columnHeaders.join(',') + '\n';

    // Map JSON data to CSV rows
    const rows = jsonData
      .map((row) => {
        // Map each row to CSV format
        return columnHeaders.map((field) => row[field] || '').join(',');
      })
      .join('\n');

    // Combine headers and rows
    return headers + rows;
  }

  // Function to initiate CSV download
  function downloadCSV(jsonData, headers) {
    const csvData = convertJSONToCSV(jsonData, headers);

    // Check if CSV data is empty
    if (csvData === '') {
      alert('No data to export');
    } else {
      // Create CSV file and initiate download
      const blob = new Blob([csvData], { type: 'text/csv;charset=utf-8;' });
      const link = document.createElement('a');
      link.href = URL.createObjectURL(blob);
      link.setAttribute('download', 'product_data.csv');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }

  // Render the button for CSV export
  return (
    <button
      onClick={() => {
        downloadCSV(elements, fileHeaders);
      }}
    >
      Export Product Data
    </button>
  );
};

// Sample JSON data for products
const dummyData = [
  {
    "product_name": "Widget",
    "price": 50,
    "quantity": 2,
    "total_price": 100
  },
  {
    "product_name": "Gadget",
    "price": 100,
    "quantity": 1,
    "total_price": 100
  },
  {
    "product_name": "Tool",
    "price": 75,
    "quantity": 3,
    "total_price": 225
  },
  {
    "product_name": "Accessory",
    "price": 25,
    "quantity": 4,
    "total_price": 100
  },
  {
    "product_name": "Equipment",
    "price": 200,
    "quantity": 1,
    "total_price": 200
  }
];

// Export the component with sample data
export default () => <DownloadProducts elements={dummyData} />;

Resolving CORS Issues in express Node.js Project

Adan Kalla — Mon, 18 Mar 2024 22:45:34 +0000

Ever faced those stubborn CORS errors in your Express.js app even after adding the CORS package? Don't worry; you're not alone. In this guide, I'll share my journey of tackling persistent CORS errors and how I managed to fix them. Remember, what worked for me might not be a one-size-fits-all solution, but it's worth a shot.

1. Understanding the Challenge:

So, picture this: You've added the CORS package to your project hoping to wave goodbye to CORS errors. But lo and behold, those pesky errors persist, popping up whenever your app tries to fetch data from another origin.

2. Deciphering the Issue:
You're scratching your head at error messages like:

Access to fetch at 'https://api.example.com/data' from origin 'https://admin.example.com' has been blocked by CORS policy.

It's frustrating, right? Despite having the CORS package onboard, the errors just won't quit.

3. The Fix (With a Disclaimer!):
Now, let me be real with you. I tried a bunch of things, and here's what finally worked for me. But hey, it might not be a magic wand for everyone. So, here's the disclaimer: This fix worked for me; it might work for you too, but no guarantees.

4. Example Code (Before Trying Everything):
Let's take a look at the initial code snippet with the CORS package added:

// Initial Express.js code with CORS package
import express from 'express';
import cors from 'cors';

const app = express();

app.use(cors());

// Other middleware and route handling here...

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

5. Example Code (After Trying Everything):
Here's the code I landed on after trying every trick in the book:

// Updated Express.js code with a twist to handle CORS
import express from 'express';
import cors from 'cors';

const app = express();

// Define allowed origins
const allowedOrigins = [
  'http://localhost:3000',
  'https://api.example.com',
  // Add more origins as needed
];

// Configure CORS options
const corsOptions = {
  origin: function(origin, callback) {
    if (allowedOrigins.indexOf(origin) !== -1 || !origin) {
      callback(null, true);
    } else {
      callback(new Error('Not allowed by CORS'));
    }
  },
  credentials: true,
};

// Apply custom CORS middleware with configured options
app.use(cors(corsOptions));

// Other middleware and route handling here...

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

So, there you have it – Remember, if you're still wrestling with CORS gremlins, don't lose heart. Give this fix a try, and who knows, it might just do the trick for you too, Just keep in mind, it's not a one-size-fits-all solution, but if it works, it works.

DEV Community: Adan Kalla

Converting JSON to CSV in React: A DIY Approach

Resolving CORS Issues in express Node.js Project