how to handle null values while mapping JSON data in javascript

Question

I have to map through a data looking similar to this,

"data": {
    "16450603807212420": [
        {
            "mall_id": 4,
             ... more entries
            "order_data": [
                {
                    "detail_order_id": 464,
                    "order_id": "16450603807212420",
                    "order_status": 200,
                    "goods_id": 1000000019,
                       ... more entries
                },
                {
                    "detail_order_id": 465,
                     ... more entries
                }
            ]
        },
        {
            "mall_id": 4,
              ... more entries
            "order_data": [
                {
                    "detail_order_id": 466,
                     ... more entries
                }
            ]
        }
    ],
    "16450603807212421": [null],
    "16450603807212422": [
        {
            "mall_id": 4,
               ... more entries
            "order_data": [
                {
                    "detail_order_id": 467,
                    ... more entries
                },
                {
                    "detail_order_id": 468,
                   ... more entries
                }
            ]
        }
    ],
    "16450603807212423": [
        {
            "mall_id": 4,
               ... more entries
            "order_data": [
                {
                    "detail_order_id": 467,
                    ... more entries
                },
                {
                  null
                }
            ]
        }
    ]
}

and my map Function looks like this

 <div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => (
                <div key={index}>
                  <OrderListProduct
                    date={order.created_at}
                    orderType={order.delivery_option_name}
                    product_info={order.order_data}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>

in order to map the data inside each key value of "16450----" which is an order Id. Im not supposed to have null inside the data but some error occurred and received the above looking data which my map function was not able to handle. The issue of the data containing null values was fixed from the back-end side but I would still like my map function to be able to handle whenever I receive null data.

help would be much appreciated!!!

Answer 1

You can use if in map, or filter them beforehand. Also optional changing operator?.

<div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => {
                if(!order) { ... }
                else {
                return (
                <div key={index}>
                  <OrderListProduct
                    date={order?.created_at}
                    orderType={order?.delivery_option_name}
                    product_info={order?.order_data}
                  />
                </div>
                )}}
              )}
            </div>
          ))}
        </div>

Answer 2

just check for null or undefined values before your map function's return statement

        <div>
          {orderValues?.map((data, idx) => (
            <div key={idx}>
              {data?.map((order, index) => order && (
                <div key={index}>
                  <OrderListProduct
                    date={order.created_at}
                    orderType={order.delivery_option_name}
                    product_info={order.order_data}
                  />
                </div>
              ))}
            </div>
          ))}
        </div>