How can I destructure my array of multiple objects-CodePudding

  [
    0: {_id: '61de38eb6ea1563609e1d0a7', title: 'FALCON SR SUNTOUR', price: '59', description: ' Alloy.., …}
    1: {_id: '61d7a8b885c68311be8dd1b3', title: 'Lifelong LLBC2702 Falcon', price: '59', description: 'Low Maintenance: High.., …}
    ]

I am creating a react project. I have the above array of objects on my database. If any user place order the order list and user email will go into a single array. So my question is how can I display the orders. I have tried a map also tried a nested map but got " order.map is not a function". Here is the code

{orders.map((order, idx) => order.map(singleOrder => console.log(singleOrder)))}

I want to destructure the order details into UI

This is my code:

const ManageAllOrders = () => {
    const [orders, setOrders] = useState([])
    const { user } = UseAuth()

    useEffect(() => {
        fetch(`https://polar-savannah-40370.herokuapp.com/dashboard/orders`)
            .then(res => res.json())
            .then(data => setOrders(data))
    }, [user.email])

    console.log('orders', orders);
    return (
        <div>
            <h2>Manage Orders</h2>
            <Table responsive striped bordered hover size="sm">
                <thead>
                    <tr>
                        <th>#</th>
                        <th>Product Name</th>
                        <th>Price</th>
                        <th>Email</th>
                        <th>Address</th>
                        <th>Order Date</th>
                        <th>Status</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        orders?.map((order, idx) =>
                            Object.defineProperties(order).map(([key, value]) => {
                                return (
                                    <div>
                                        {key} : {value}
                                    </div>
                                );
                            })
                        )}

                    {/* {orders.map((order, idx) => order[0].map(console.log()))} */}

                </tbody>
            </Table>
        </div>
    );
};

export default ManageAllOrders;

CodePudding user response：

You cannot call map on each order item as it is an object. To iterate over them use Object.entries method.

Try like below

{
    orders?.map((order, idx) =>
        Object.entries(order).map(
            ([key, { description, title, price, cartQuantity }]) => {
                if (key !== "_id") {
                    return (
                        <tr>
                            <td>{key}</td>
                            <td>{title}</td>
                            <td>{price}</td>
                            <td>{cartQuantity}</td>
                            <td>{description}</td>
                            <td>email</td>
                            <td>address</td>
                        </tr>
                    );
                }
            }
        )
    );
}

I also noticed your array has stored values with string keys (email, _id). To retrieve them you can do it like below.

{orders?.["email"]}
{orders?.["_id"]}

Code Sandbox

CodePudding user response：

Is Data type Array??

    useEffect(() => {
    fetch(`https://polar-savannah-40370.herokuapp.com/dashboard/orders`)
        .then(res => res.json())
        .then(data => setOrders(data))
}, [user.email])