load the json file in react js

letskillsup

Let step-by-step to load a JSON file in React js

loading JSON data typically refers to the process of fetching JSON data from an external source, such as an API or a local file

how to create a JSON file

Open a Text Editor: Open your preferred text editor.


Write JSON Data: Write the JSON data in the text editor. JSON data consists of key-value pairs separated by colons, with each key-value pair separated by commas. 

Arrays are enclosed in square brackets [ ], and objects (nested key-value pairs) are enclosed in curly braces { }. Here's an example:


{
  "employees": [
    {
      "id": 1,
      "name": "John Doe",
      "position": "Software Engineer"
    },
    {
      "id": 2,
      "name": "Jane Smith",
      "position": "Product Manager"
    },
    {
      "id": 3,
      "name": "Alice Johnson",
      "position": "UI/UX Designer"
    }
  ]
}

Save the File with .json Extension: Save the file with a .json extension. For example, you can name it data.json.


Choose Encoding: When saving the file, make sure to choose UTF-8 encoding to ensure compatibility with various platforms and systems.


Save Location: Save the JSON file in the directory where you want to use it in your project.


Suppose we have a JSON file named data.json with the following content:



Now, let's create a React component called UserData to fetch and display this data:


import React, { useState, useEffect } from 'react';
import jsonData from './data.json';

function App() {
  const [employees, setEmployees] = useState([]);

  useEffect(() => {
    setEmployees(jsonData.employees);
  }, []);

  return (
    <div>
      <h1>Employee Data</h1>
      <ul>
        {employees.map(employee => (
          <li key={employee.id}>
            <strong>Name:</strong> {employee.name}, <strong>Position:</strong> {employee.position}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;




Let's go through the code step by step:


1. Importing JSON File:

   import jsonData from './data.json';

   

   Here, we import the JSON data from the data.json file into our React component. The jsonData variable now contains the JSON object from the file.


2. Initializing State:

   const [employees, setEmployees] = useState([]);

   

   We're using React's useState hook to create a state variable named employees. This state will hold an array of employee objects once they're loaded from the JSON data. Initially, it's set to an empty array.


3. Fetching Data with useEffect:

   useEffect(() => {

     setEmployees(jsonData.employees);

   }, []);

   

   We use the useEffect hook to perform side effects in functional components. In this case, we want to set the employees state once when the component mounts, so we pass an empty dependency array []. This ensures that the effect runs only once after the initial render.


   Inside the effect, we call setEmployees(jsonData.employees) to set the employees state to the array of employees from the imported JSON data.


4. Rendering Employee Data:


    {employees.map(employee => (
          <li key={employee.id}>
            <strong>Name:</strong> {employee.name},
            <strong>Position:</strong> {employee.position}
          </li>
        ))}
   

   

   We use the map function to iterate over the employee's array and render a list item (<li>) for each employee.


   - For each employee, we set the key attribute to the employee's id. This helps React identify each list item efficiently for rendering and updates.

   - Inside each list item, we display the employee's name and position properties using interpolation ({}).


By following these steps, we import the JSON data, set it to the component's state when the component mounts, and then render each employee's data using the map function. 

This allows us to dynamically generate UI elements based on the data from the JSON file. If you have any further questions or need clarification on any part of the code, feel free to ask!

0 Comments