Handling Nested Arrays and Objects in React: Correcting Data Access in Assembly Items

In React applications, handling API responses with nested arrays and objects can often lead to unintended undefined or null values if not accessed properly. A common issue arises when trying to retrieve properties from a nested structure without checking if intermediate values exist.

Understanding the Issue

In our case, we are dealing with data coming from an API where the item_id property in AssemblyItem is an array instead of a single object. The expected structure from the API looks like this:

{

 “id”: 1,

 “name”: “Assembly Item 1”,

 “item_id”: [

  {

   “metal_quality_id”: {

    “metal_quality”: “Good”

   },

   “metal_color_id”: {

    “metal_color_name”: “Black”

   }

  }

 ]

}

Incorrect Data Access

Initially, the code attempted to access these properties as follows:

{ItemDetails?.item_id?.metal_quality_id?.metal_quality || ‘N/A’}

{ItemDetails?.item_id?.metal_color_id?.metal_color_name || ‘N/A’}

This resulted in an error or unexpected “N/A” because item_id is an array, not an object. The correct way to access elements within an array is by specifying an index ([0] for the first element).

The Corrected Approach

To properly retrieve metal_quality and metal_color_name, we should first check if item_id exists and then access the first element.

<div className=”bg-white rounded-lg shadow mb-8″>

 <div className=”flex border-b border-gray-200″>

  <div className=”w-1/3 p-3 bg-gray-50 text-sm font-medium text-dewlabel”>Make Types</div>

  <div className=”w-2/3 p-3 text-sm text-dewlabel”>

   {CadDetails.make_types?.make_name || ‘N/A’}

  </div>

 </div>

 <div className=”flex border-b border-gray-200″>

  <div className=”w-1/3 p-3 bg-gray-50 text-sm font-medium text-dewlabel”>Metal Quality</div>

  <div className=”w-2/3 p-3 text-sm text-dewlabel”>

   {ItemDetails?.item_id?.[0]?.metal_quality_id

    ? ItemDetails.item_id[0].metal_quality_id.metal_quality || ‘N/A’

    : ‘N/A’}

  </div>

 </div>

 <div className=”flex border-b border-gray-200″>

  <div className=”w-1/3 p-3 bg-gray-50 text-sm font-medium text-dewlabel”>Metal Color Name</div>

  <div className=”w-2/3 p-3 text-sm text-dewlabel”>

   {ItemDetails?.item_id?.[0]?.metal_color_id

    ? ItemDetails.item_id[0].metal_color_id.metal_color_name || ‘N/A’

    : ‘N/A’}

  </div>

 </div>

</div>

What This Fix Does

1. Checks if item_id exists before accessing it.
2. Accesses the first element in item_id using [0].
3. Safely retrieves properties using optional chaining (?.).
4. Handles missing values gracefully by providing a fallback ('N/A').

Edge Cases Considered

• Empty item_id array: The condition ensures it doesn’t throw an error.
• Missing metal_quality_id or metal_color_id: It correctly falls back to 'N/A'.

Final Thoughts

Handling deeply nested API responses requires a cautious approach, especially when dealing with arrays or optional properties. By using proper indexing, optional chaining, and fallback values, we can avoid common runtime errors and improve data reliability in our React applications.

This fix ensures that the Metal Quality and Metal Color Name fields always display meaningful data when available and 'N/A' when missing, resulting in a better user experience.