Using data in JSON format in Snack

There are many ways to use data with apps made with Snack Expo. Sometimes the data is stored as JSON (JavaScript Object Notation). In this format, data can be easily stored as key-value pairs and can also be converted to CSV files. This article demonstrates how to use JSON data in Snack using JavaScript, including reading JSON data and displaying it as a table, plus converting JSON to CSV format for download.

Sample JSON Data Structure

For our examples, we'll use a products.json file containing product information:

{
   "products": [
      {
         "id": 68,
         "title": "School shoes",
         "price": 122,
         "quantity": 3,
         "total": 160,
         "discount%": 50,
         "discountedRate": 80
      },
      {
         "id": 82,
         "title": "Washing Gloves",
         "price": 50,
         "quantity": 2,
         "total": 60,
         "discount%": 10,
         "discountedRate": 45
      },
      {
         "id": 28,
         "title": "Moisturizer 100ml",
         "price": 45,
         "quantity": 2,
         "total": 90,
         "discount%": 13.1,
         "discountedRate": 70
      }
   ]
}

Example 1: Reading and Displaying JSON Data as Table

This example shows how to import JSON data and render it in a table format using React Native components.

Implementation Steps

• Step 1: Import View from 'react-native' and JSON data from the products.json file

• Step 2: Create the App.js component

• Step 3: Use the id as key and fetch all products from the JSON file

• Step 4: Display header and use map function to render each product

• Step 5: Structure data in table format using HTML table tags

import productData from './products.json'
import {Component} from "react";
import {View} from "react-native";

export default class JSONEXAMPLE extends Component {
   render(){
      return (
         <View style={{padding: 10}}>
            <h2>Products Ordered</h2>
            
            <table>
               <thead>
                  <tr>
                     <th>ID</th>
                     <th>Title</th>
                     <th>Price</th>
                     <th>Quantity</th>
                  </tr>
               </thead>
               <tbody>
                  {productData.products.map(products => {
                     const { id, title, price, quantity } = products
                     return (
                        <tr key={id}>
                           <td>{id}</td>
                           <td>{title}</td>
                           <td>{price}</td>
                           <td>{quantity}</td>
                        </tr>
                     )
                  })}
               </tbody>
            </table>
         </View>
      )
   }
}

Example 2: Converting JSON to CSV and Downloading

This example demonstrates how to convert JSON data to CSV format and provide a download functionality.

Implementation Steps

• Step 1: Import necessary components and JSON data

• Step 2: Create a download function using Blob API

• Step 3: Convert JSON data to CSV format

• Step 4: Implement download trigger with button click

import productData from './products.json'
import {View} from "react-native";

const downldFl = ({ data, fl_name, fl_type }) => {
   const blobb = new Blob([data], { type: fl_type })
   const lnk = document.createElement('a');
   lnk.download = fl_name;
   lnk.href = window.URL.createObjectURL(blobb);
   lnk.click();
   URL.revokeObjectURL(lnk.href);
   lnk.remove();
}

const downloadCSVfile = e => {
   e.preventDefault()
   
   let headers = ['Id,Title,Price,Quantity']
   
   let productsCsv = productData.products.reduce((str1, product) => {
      const { id, title, price, quantity } = product
      str1.push([id, title, price, quantity].join(','))
      return str1
   }, [])
   
   downldFl({
      data: [...headers, ...productsCsv].join('<br>'),
      fl_name: 'products.csv',
      fl_type: 'text/csv',
   })
}

export default function JSONEXAMPLETWO() {
   return (
      <View style={{padding: 10}}>
         <h2>Download JSON as CSV</h2>
         
         <table className='productsTable'>
            <thead>
               <tr>
                  <th>ID</th>
                  <th>Title</th>
                  <th>Price</th>
                  <th>Quantity</th>
               </tr>
            </thead>
            <tbody>
               {productData.products.map(products => {
                  const { id, title, price, quantity } = products
                  return (
                     <tr key={id}>
                        <td>{id}</td>
                        <td>{title}</td>
                        <td>{price}</td>
                        <td>{quantity}</td>
                     </tr>
                  )
               })}
            </tbody>
         </table>
         
         <button type='button' onClick={downloadCSVfile}>
            Download CSV
         </button>
      </View>
   )
}

Key Features Explained

JSON Import: The import productData from './products.json' statement allows direct importing of JSON files in React Native projects.

Data Mapping: The map() function iterates through the JSON array and renders each item as a table row.

CSV Conversion: The conversion process involves creating headers, mapping JSON objects to comma-separated strings, and joining everything with newline characters.

File Download: The Blob API creates a downloadable file object, while createObjectURL() generates a temporary URL for the download link.

Output Results

When running these examples in Snack:

• Example 1 displays the JSON data in a formatted table

• Example 2 shows the same table with an additional download button

• Clicking "Download CSV" generates and downloads a products.csv file

Conclusion

Working with JSON data in Snack Expo is straightforward using React Native components. You can easily display JSON data in tables and convert it to downloadable CSV files using the Blob API and URL manipulation methods.