Working with JSON-formatted data in Snack

Apps made with Snack Expo can use data in a variety of ways. Sometimes data is stored as JSON, JavaScript Object Notation. In this format, data can be easily stored as key-value pairs or converted to a CSV file. In this article, using javascript on Snack, a method of using JSON data is specified. In Example 1, a method is shown to read this data and display it as a table. In the second example, a method is shown to save the JSON data as a CSV file and download it.

Algorithm-1

Step 1 - Import views from "react-native". You can also import JSON data from a json file. Here, for example, products.json

is used

Step 2 - Make App.js and write the code.

Step 3 - Use id as key and get all products from json file.

Step 4 - First display the title and then use the mapping function to get each product item. Select the columns to display.

Step 5 - Display the data in tabular form using the

, , , and

tags.

Step 6 - Check the results.

JSON file used in the example: File name – products.json

Example

{
   "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
      },
      {
         "id": 92,
         "title": "Leather Belt",
         "price": 900,
         "quantity": 1,
         "total": 950,
         "discount%": 19.77,
         "discountedRate": 766
      },
      {
         "id": 49,
         "title": "Woollen Shawl",
         "price": 800,
         "quantity": 2,
         "total": 1300,
         "discount%": 20,
         "discountedRate": 994
      }
   ]
}

Example 1: Read JSON data and display it as a table.

The important files used in the project are

• App.js

App.js: This is the main JavaScript file for the project.

Example

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>
      )
   }
}

View Results

The results can be viewed online. As the user types code, the web view is selected by default and the results are displayed immediately.

JSON data is displayed as a table in Snack’s web view

Algorithm-2

Step 1 − Import the view from “react-native”. You can also import JSON data from a json file. Here, for example using products.json

Step 2 - Make App.js and write the code.

Step 3 - Get all products from json file using id as key and display product information in table form.

Step 4 - Write the function downldFl() with parameter data, file name, and file type. Use Blob() to specify the file type and window.URL.createObjectURL(blob) to download the file.

Step 5 − Connect the header with ',', and then connect the json content, separated by "

".

Step 6 − Click Download CSV and check the downloaded file and its results.

Example 2: Convert JSON data to CSV and download the file.

The important files used in the project are

• App.js

App.js: This is the main JavaScript file for the project.

Example

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(''),
         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>
   )
}

View Results

The results can be viewed online. When the user clicks on the download button, the file will be downloaded and the result will be displayed immediately.

Press the Download CSV button to download the file.

Display the contents of the downloaded CSV file made from JSON.

This article provides two different examples of how to use JSON in Expo Snack applications. First, a method is given to read a json file and display its contents in tabular form. Then a method is given to save the selected JSON data in CSV format and download the file.

The above is the detailed content of Working with JSON-formatted data in Snack. For more information, please follow other related articles on the PHP Chinese website!