Cannot fetch data from json file

Question

I wanna fetch the products from my products.json file and display it in my App.js by using map, but it doesn't work. Is there any way i can fix this? Btw thank you for helping me!

App.js:

import "./styles.css";
import { products } from "./data";

export default function App() {
  return (
    <div className="App">
      {products.map((product) => {
        return <div>products</div>;
      })}
    </div>
  );
}

data.json:

{
  products:
   [
    {
      id:1,
      img: "https://vcdn-vnexpress.vnecdn.net/2017/04/27/strawberry-2129-1493287309.jpg",
      title:"strawberry",
      price: 3
    },
    {
      id:2,
      img: "https://cdn.sallysbakingaddiction.com/wp-content/uploads/2012/01/mm-cookies.jpg",
      title:"cookies",
      price: 5
    },
    {
      id:3,
      img: "https://rangsua.vn/wp-content/uploads/2019/05/juice-bia.jpg",
      title:"juice",
      price: 7
    }
  ]
}
    
Sandbox link: https://codesandbox.io/s/cart-vjhfb?file=/src/data.json

It seems to be working fine, try changing your return statement to <div>products - {product.title}</div>; — Akshay
– Akshay, Commented Jan 4, 2022 at 4:14
wel i tried and it's like this: codesandbox.io/s/cart-vjhfb?file=/src/App.js — Mina Young
– Mina Young, Commented Jan 4, 2022 at 4:34

Parnab Sanyal · Accepted Answer · 2022-01-04 04:19:14Z

1

Two problems. (both likely to be silly mistakes)

You want to use product variable, but you are using products
You need to wrap product with {}. It will look like {product.title}

answered Jan 4, 2022 at 4:19

Parnab Sanyal

7395 silver badges19 bronze badges

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

Comments

Mayur Vaghasiya · Accepted Answer · 2022-01-04 04:19:37Z

0

You return the <div>products</div>, that's the problem. replace with <div>{product.title}</div>; code

Try this code it's working

import "./styles.css";
import { products } from "./data";

export default function App() {
  return (
    <div className="App">
      {products.map((product) => {
        return <div>{product.title}</div>;
      })}
    </div>
  );
}

answered Jan 4, 2022 at 4:19

Mayur Vaghasiya

1,4812 gold badges18 silver badges27 bronze badges

2 Comments

Mina Young Over a year ago

well i tried and it's like this: codesandbox.io/s/cart-vjhfb?file=/src/App.js

Mayur Vaghasiya Over a year ago

oky, if my answer help you so accept it and vote up :)

Collectives™ on Stack Overflow

Cannot fetch data from json file

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related