How to map over an GET method response with React.js

Question

This code returns: TypeError: data.map is not a function, at Orders.js:18

I import this component to my app.js and use it to get data from OData servers.

import React, {Component} from 'react'
import axios from 'axios'

export default class Orders extends Component {
    constructor(props) {
        super(props);
        
        this.state = {
            Orders: []
        };
    }
    getOrdersData() {
        axios
            .get(`Orders`, {})
            .then(res => {
                const data = res.data
                console.log(data)
                const Orders = data.map(u =>
                    <div>
                    <p>{u.CustomerId}</p>
                    
                    </div>
                    )

                    this.setState({
                        Orders
                    })

            })
            .catch((error) => {
                console.log(error)
            })

    }
    componentDidMount(){
        this.getOrdersData()
    }
    render() {

        return (
            <div>
                {this.state.Orders}
            </div>
        )
    }
}

the returned response looks something like this on the console:

{d: {…}}
d:
results: Array(200)
[0 … 99]
0:
Customer: {__deferred: {…}}
CustomerID: "DOGA"
Employee: {__deferred: {…}}
EmployeeID: 2
Freight: "56.234"
OrderDate: "/Date(836438400000)/"
OrderID: 12345
Order_Details: {__deferred: {…}}
RequiredDate: "/Date(838857600000)/"

I want to create a table and map those results by their orderId on a table.

This is a piece of the response from API:

{
"d" : {
"results": [
{
"__metadata": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)", "type": "NorthwindModel.Order"
}, "OrderID": 10248, "CustomerID": "VINET", "EmployeeID": 5, "OrderDate": "\/Date(836438400000)\/", "RequiredDate": "\/Date(838857600000)\/", "ShippedDate": "\/Date(837475200000)\/", "ShipVia": 3, "Freight": "32.3800", "ShipName": "Vins et alcools Chevalier", "ShipAddress": "59 rue de l'Abbaye", "ShipCity": "Reims", "ShipRegion": null, "ShipPostalCode": "51100", "ShipCountry": "France", "Customer": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Customer"
}
}, "Employee": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Employee"
}
}, "Order_Details": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Order_Details"
}
}, "Shipper": {
"__deferred": {
"uri": "https://services.odata.org/V2/northwind/Northwind.svc/Orders(10248)/Shipper"
}
}
}, {

Answer 1

That's because you are trying to map over an object.

.map()is an array method.

maybe you want to loop over the results array (data.results)?