How to fetch public folder .json file into react component

Question

I am trying to calculate the array and show the number on the dashboard. I tried to fetch('data/users.json) but got an error that shows 0. Need to calculate the id from two JSON files located at public folder inside data folder, you can see on the code below.

import React from 'react'
import '../Navbar/navbar.css'
import '../Dashboard/dashboard.css'
// import UserList from "./data/users.json"

const Dashboard = () => {

    
    return (
        <div>
            <main>
                <h1 className= "heading">Welcome to Dashboard</h1>
                    {/* <p> User data list : {Object.keys(UserData).length}</p>
                    <p>Suscriber list: {Object.keys(Suscriber).length}</p> */}
                <p>
                    Lorem
                    ipsum dolor sit, amet consectetur adipisicing elit. Placeat accusantium
                    rerum dolorem odio amet id blanditiis nobis incidunt consequuntur
                    molestiae doloribus corrupti quidem dolor ex, assumenda beatae dolore?
                    Voluptatem, ab?Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                </p>

                <div className="users_view">
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Total Users: {Object.keys(fetch('data/users.json')).length} </h1>
                        </div>
                    </div>
                    <div className="flexs">
                        <div className="total_users">
                            <h1>Subscribed user: {Object.keys(fetch('data/subscriptions.json')).length}</h1>
                        </div>
                    </div>
                </div>
                
                
            
            </main>
        </div>
    )
}

export default Dashboard

Below image is of directories:

Anyone help me to fetch those 2 JSON data and calculate the array number to display on the dashboard. Below images show the output:

Please read How to Ask. The part about not posting pictures of text. — David Arias
– David Arias, Commented Aug 25, 2021 at 17:36
And read an introductory guide to fetch. It doesn't return synchronously parsed JSON. — Quentin
– Quentin, Commented Aug 25, 2021 at 17:37
okay, thanks! I was trying to place the directories image but I placed the whole SS. Sorry for that. — Unknown Beginner
– Unknown Beginner, Commented Aug 25, 2021 at 18:52

Giorgi Gvimradze · Accepted Answer · 2021-08-26 08:03:30Z

7

This is how I'd advice to import a json file:

import React from 'react'

export default function App() {
  const [users,setUsers] = React.useState([{}])
  React.useEffect(()=>{
    fetch('data/users.json').then((res)=>res.json()).then((data)=>{
      setUsers(data)
     })
     
  },[])
  return (
    <div className="App">
      <h1>Users:{users.length}</h1>
    </div>
  );
}

this is the sample users.json file:

[
  {
    "id": 1,
    "name": "name"
  },
  {
    "id": 2,
    "name": "name 2"
  }
]

this is the structure of the main directory:

Here is the code

edited Aug 26, 2021 at 8:03

answered Aug 25, 2021 at 17:49

Giorgi Gvimradze

2,2291 gold badge22 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Unknown Beginner Over a year ago

users.json file is placed on a public folder inside the data folder. I tried this but doesn't work

Giorgi Gvimradze Over a year ago

@RakeshShrestha please check my update. If you find it working as intended, you could accept the answer.

alexandre_plt · Accepted Answer · 2021-08-25 17:48:26Z

1

you can try to import your JSON:

import data from 'data/users.json'

Then make a length of the data

Object.keys(data).length

or use JSON.parse

answered Aug 25, 2021 at 17:48

alexandre_plt

511 silver badge9 bronze badges

3 Comments

Unknown Beginner Over a year ago

users.json file is placed on a public folder inside the data folder. I tried this but doesn't work

alexandre_plt Over a year ago

Ah indeed, it should be placed in the src/ it should work

Unknown Beginner Over a year ago

Yes, it works when I placed it in the src folder. But I need to fetch it from the public folder. Anyway, I got my answer thanks for answering.

Collectives™ on Stack Overflow

How to fetch public folder .json file into react component

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related