How to display map key/value in a table in a lightning component

Question

Slowly getting there but related to Pulling JSON Data from API to Lightning Component.

I've been able to return the data in a map as, the key/value populate correctly judging by the console log.

End of apex class

       if(res.getStatusCode() == 200) {
        JSON2Apex ssJSON = JSON2Apex.parse(res.getBody());
        for (JSON2Apex.Shipments s: ssJSON.shipments){
            System.debug('shipments is' + s.trackingNumber + 'carrier code = '+s.carrierCode);
            shipmentMap.put(s.trackingNumber, s.carrierCode);
        }
   }
    return shipmentMap;

Javascript Helper

({
    getResponse: function(component, orderID) {
        var action = component.get("c.getCalloutResponseContents");
        action.setParams({
            "url": 'https://url.com?orderNumber=' + orderID
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var responseValue=response.getReturnValue();
                console.log('responseValue',responseValue);
                component.set('v.response',responseValue) 
 
            }
        });

        $A.enqueueAction(action);
    },
})

I can see in the console.log that the responseValue is a map (at least it looks like it to me:

000003033033: "carrier code as expected"
000003033033: "carrier code as expected"

The component is currently as below, I keep trying different {!v.response.key} and v.ship but I obviously am missing something fundamental about iterating over a map. I created a list but struggled to insert the 2 seperate values (one I intend to display as a hyperlink).

<aura:component  controller="API" access="global" implements="flexipage:availableForRecordHome,force:hasRecordId" > 

<aura:attribute name="orderID" type="String" default="" />
<aura:attribute name="message" type="String" default=""/>
<aura:attribute name="response" type="Map" />

<lightning:card iconName="standard:contact" title="Get Shipment Tracking:">
    <div class="slds-p-around_medium">
        <lightning:layout>
            <lightning:layoutItem size="8" padding="around-small">
                <lightning:input aura:id="OrderID" label="Order ID" type="string" value="{!v.orderID}"/>
                <lightning:button label="Get Tracking" onclick="{!c.calloutCtrl }" variant="brand" class="slds-m-top_medium"/>
            </lightning:layoutItem>
        </lightning:layout>
        <p>If no data is returned, no shipments exist for the order.</p>
        <table id="tableId" class="slds-table slds-table_bordered slds-table_cell-buffer" cellspacing="1"  >
        <thead>
            <tr>
                <th>Tracking Number</th>
                <th>Carrier</th>
            </tr>
        </thead>
        <tbody>
            <aura:iteration items="{!v.response}" var="ship">
                <tr >
                    <td>
                        {!v.response.key}
                    </td>
                    <td>
                        {!ship.carrierCode}
                    </td>
                    
                </tr>
            </aura:iteration>  
        </tbody>
    </table>

    </div>    
</lightning:card>
</aura:component>

How do I correctly iterate and assign the map values to the columns in the component?

I appreciate the help, slowly learning and putting things together. The end result is a small component to allow agents to search for shipments directly in salesforce rather than our fulfillment software (we don't push orders to salesforce so there is no data available to help, it's purely an external callout).

Answer 1

You can't iterate over a map/object, you can only iterate over an Array. To get from one to the other, use Object.entries:

component.set('v.response', Object.entries(responseValue))

And in your iteration, you can then specify the zeroth and first indexes for the key and value, respectively:

<aura:iteration items="{!v.response}" var="ship">
    <tr >
        <td>
            {!ship[0]}
        </td>
        <td>
            {!ship[1]}
        </td>
        
    </tr>
</aura:iteration>  

Note that this design doesn't guarantee that you'll get the tracking codes in the same order they were submitted/received. If you want to do that, make a List<Wrapper>, where Wrapper has the trackingNumber and carrierCode.