0

I have products.json in which I have data. Now, I wish to render it using Reactjs.
products.json

[
  {
    "id": 1,
    "productName": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
    "price": 109.95,
    "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
    "category": "men's clothing",
    "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
    "specification": {}
  },
  {
    "id": 2,
    "productName": "Mens Casual Premium Slim Fit T-Shirts ",
    "price": 22.3,
    "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
    "category": "men's clothing",
    "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
    "specification": {}
  }
]

app.js

function App(){
       return(
       )

}

I want the json data to be rendered through app.js.

My Take On: I'm new to Reactjs and JSON and was thinking of using fetch, response but I'm not sure how can I do it. Can someone please help?

Neha Chaudhary
  • 1,071
  • 4
  • 15
  • 31
  • 1
    Does this answer your question? [How to display json data in a reactjs component](https://stackoverflow.com/questions/58878964/how-to-display-json-data-in-a-reactjs-component) – stekhn Apr 22 '21 at 19:34
  • I think @stekhn comment should help with rendering this in react, but you also mentioned fetch - this might help https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API – Tore Apr 22 '21 at 19:41
  • 1
    fetch() is used to load data from a server. With a local json file you can just import it: https://codesandbox.io/s/upbeat-nightingale-098lx?file=/src/App.js –  Apr 22 '21 at 19:49
  • Let's say I have categories in json. How do I render differently on the basis of categories? – Neha Chaudhary Apr 22 '21 at 20:11

1 Answers1

1

First you have to put your data in variable For example:

const data = [
{
  "id": 1,
  "productName": "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
  "price": 109.95,
  "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
  "category": "men's clothing",
  "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
  "specification": {}
},
{
  "id": 2,
  "productName": "Mens Casual Premium Slim Fit T-Shirts ",
  "price": 22.3,
  "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion 
    wear and diehard baseball fans. The Henley style round neckline includes a three-button 
    placket.",
    "category": "men's clothing",
    "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
    "specification": {}
 }
]

The you have to map through your array Like this

function App(){
   return (
     <div>
      {data.map((d) => (
        <div key={d.id}>
          <p>ID: {d.id}</p>
          <p>Product Name: {d.productName}</p>
          <p>Price: {d.price}</p>
          <p>Description: {d.description}</p>
          <p>Category: {d.category}</p>
          <p>
             Image: <img src={d.image} width="100" />
          </p>
          <br />
          <br />
        </div>
  ))}
   </div>
);

}

Then you can add CSS to make it look better!

Issa
  • 92
  • 6