Home > Software engineering >  2 map function loops returns an undefined array instead of a jsx table row element
2 map function loops returns an undefined array instead of a jsx table row element

Time:10-10

I have this code which uses the map function to go through an object

the object schema is this one: result_petrol_data.result

{
    "id": 51019,
    "name": "BEYFIN",
    "fuels": [
        {
            "id": 43917493,
            "price": 1.669,
            "name": "Benzina",
            "fuelId": 1,
            "isSelf": false
        },
        {
            "id": 43917492,
            "price": 1.639,
            "name": "Benzina",
            "fuelId": 1,
            "isSelf": true
        }
    ],
    "location": {
        "lat": 00.1234567890,
        "lng": 5.1234567890
    },
    "insertDate": "2022-10-10T07:47:59 02:00",
    "address": "Via Roma something",
    "brand": "Beyfin"
}

maxResult is the max length that I want for the result list

first map goes through all the results

second one goes through all the petrol pumps for that specific fuel distributor

let finalList = result_petrol_data.results.slice(0, maxResult).map((row, index) => {

                row.fuels.map((fuel) => {


                    //Check if the pump is the selected fuel preference
                    if (fuel.name == fuel_type_selected) { 
                        fuel_price = fuel.price.toString().replace('.', ',');

                        //Checks that the pump has the preferred dispensing method selected by the user
                        if (fuel.isSelf == is_fuelpump_selfservice) { 
                            
                            return (<tr key={index} ><td>{row.name}</td> </tr>)
                        }
                        else if (is_fuelpump_selfservice === undefined) {
                           return (//tr with some style changes)

                        }
                    }
                })
            })

finally when I print the finalList inside a table like this with maxResult set to 5:

<Table striped hover responsive size="sm">
    <thead>
        <tr>
            <th scope="col">Nome</th>
            <th scope="col">Prezzo</th>
            <th scope="col">           
  • Related