How do I Map through JSON array of object inside of array of objects?

Question

here i am fetching data from API which is giving me response in "array of objects" i want to store it in the array called products and want to display it on the page. Here is my code

import React, { useState, useEffect } from "react";
import '../all.css';
import Axios from "axios";


const AllProduct = () => {

const [products, setProducts] = useState([]);


const fetchProducts = async () => {
  const { data } = await Axios.get(
     "http://localhost:8080/api/QueryAllProducts"

    );
    
  console.log(data.response);
  setProducts(data.response);
  console.log(products);
  
};

const display = () => {

  return (products ?? []).map(product => (
    <tr key={product.id}>
       <th>{product.id}</th>
       <th>{product.name}</th>
       <th>{product.area}</th>
       <th>{product.ownerName}</th>
       <th>{product.cost}</th>
     </tr>
   ) );
  
 }
useEffect(() => {
  fetchProducts();
}, []);


  return (
    
    <div>

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Area</th>
      <th>Owner Name</th>
      <th>Cost</th>

    </tr>
  </thead>
  <tbody>
  {display()}

  </tbody>
  
 
</table>
    </div>
  
  
  )
}

export default AllProduct;

I have used ReactJS for frontend and NodeJS

here is the screenshot of what i am getting on console

It could be useful to get the structure of the data you are receiving. — Erick Villatoro
– Erick Villatoro, Commented Apr 22, 2022 at 6:36
i have added one screenshot where you can see the data i am getting through API — anonymus
– anonymus, Commented Apr 22, 2022 at 6:49

extradeck · Accepted Answer · 2022-04-22 06:58:19Z

1

Check that the type of products is array. If it is an object, an error occurs.

answered Apr 22, 2022 at 6:58

extradeck

6301 gold badge8 silver badges24 bronze badges

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

6 Comments

anonymus Over a year ago

response i am getting from api is array of objects and i want to map in products array

extradeck Over a year ago

check typeof data.response. I think data.response is of type string.

anonymus Over a year ago

yeah it's a string

anonymus Over a year ago

and type of products is an object

extradeck Over a year ago

You have to JSON.parse the data as string once. use let parseData = JSON.parse(data.response) and setProducts(parseData).

|

Collectives™ on Stack Overflow

How do I Map through JSON array of object inside of array of objects?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related