LWC Progress Bar not Rendering

Question

Very green developer here. This is my first LWC and I've been googling this for days but nothing seems to be working.

I am trying to render a list of events received from a JSON request in a vertical progress bar which is formatted as a list. I have tried both iterator and for:each to no avail. I do have a key on each item as the documentation requires but the items do not render when called.

The uuid is the "key" required as SF does not allow you to use the index of the array item.

I have placed an example of what I'm looking for in a comment beneath the area I'm having trouble with.

I am not currently using the tracking number input field, that will be my next step in my learning.

Thanks in advance for any assistance!

HTML

<template>
<!--Change the Title of the Card-->
<lightning-card title="Shipment Tracking">
    <!--Button Group with Simple Buttons w/ icons-->
    <lightning-button-group slot="actions">
        <lightning-button label="Refresh" icon-name="utility:refresh">
        </lightning-button>
    </lightning-button-group>
    <!--Card Body Element-->
    <div class="slds-var-p-around_medium lgc-bg">
        <!--Input for Tracking Number -->
        <lightning-input id="trackingNumberInput" type="text" label="Enter a Tracking Number">
        </lightning-input>
        <!--Tracking Progress Bar-->
        <div class="slds-progress slds-progress_vertical">
            <ol class="slds-progress__list">
                <template iterator:event={events}>
                    <li key={event.value.uuid} class="slds-progress__item">
                        <div class="slds-progress__marker"></div>
                        <div class="slds-progress__item_content slds-grid slds-grid_align-spread">{event.value.status}</div>
                    </li>
                </template>
            </ol>
        </div>
        <!--
        <div class="slds-progress slds-progress_vertical">
            <ol class="slds-progress__list">
                <li class="slds-progress__item slds-is-completed">
                    <div class="slds-progress__marker"></div>
                    <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 1</div>
                </li>
                <li class="slds-progress__item slds-is-active">
                    <div class="slds-progress__marker"></div>
                    <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 2</div>
                </li>
                <li class="slds-progress__item">
                    <div class="slds-progress__marker"></div>
                    <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 3</div>
                </li>
                <li class="slds-progress__item">
                    <div class="slds-progress__marker"></div>
                    <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 4</div>
                </li>
                <li class="slds-progress__item">
                    <div class="slds-progress__marker"></div>
                    <div class="slds-progress__item_content slds-grid slds-grid_align-spread">Step 5</div>
                </li>
            </ol>
            <div aria-valuemin="0" aria-valuemax="100" aria-valuenow="25" role="progressbar">
                <span class="slds-assistive-text">Progress: 25%</span>
            </div>
        </div>
        -->
        <p class="slds-var-p-horizontal_small">{shipment}</p>
    </div>
    <!--Card Footer Element-->
    <lightning-button-group slot="footer">
        <lightning-button class="slds-var-m-left_x-small" variant="brand" label="Track" title="Submit"
            onclick={getShipment}>
        </lightning-button>
    </lightning-button-group>
</lightning-card>

JS

export default class ShipTestTrack extends LightningElement {
  @track shipment;
  @track events;

  //Formula to get Tracking Information from Ship24 API
  getShipment() { 

    //Header Body - Tracking Number is required
    let events = []; //creates the events array

    var raw = "{\r\n    \"trackingNumber\": \"9361289685013858729325\"}";
  
    var requestOptions = {
      method: 'POST',
      body: raw,
      redirect: 'follow',
      headers: {
        "Content-Type": "application/json; charset=utf-8",
        "Authorization": "<Redacted>"
      }
    };

    fetch("https://api.ship24.com/public/v1/trackers/track", requestOptions)
      .then((response) => response.json())
      .then(result => {
        var numEvents = Object.keys(result.data.trackings[0].events).length;
        for (let i=0; i < numEvents; i++) {
          events[i] = {uuid: i, status: result.data.trackings[0].events[i].status};
        }
        console.log(events);  // displays the array of events to the console
        this.shipment = events[0].status; // always displays the most recent shipping event
      })
      .catch(error => console.log('error', error));
  }
} 

Console

Object { }
uuid: 0
status: "Delivered, Front Door/Porch"
Object { }
uuid: 1
status: "Your item was delivered at the front door or porch at 10:05 am on August 21, 2022 in ROCK HILL, SC 29732."
Object { }
uuid: 2
status: "Out for Delivery"
Object { }
uuid: 3
status: "Arrived at Hub"
Object { }
uuid: 4
status: "Accepted at USPS Destination Facility"
Object { }
uuid: 5
status: "Departed Shipping Partner Facility, USPS Awaiting Item"
Object { }
uuid: 6
status: "Departed Shipping Partner Facility, USPS Awaiting Item"
Object { }
uuid: 7
status: "Picked Up by Shipping Partner, USPS Awaiting Item"

Answer 1

You just need to write to this.events not events as you are.

Replace your for loop with this map function:

    this.events = result.data.trackings[0].events.map( (event,counter)=> {
      return {uuid: counter, events.status};
    });