How can i get the last item of array?

Question

I have an array of objects. I need to render an information from the last item of the array and I try this:

<p>{leg.segments[leg.segments.length - 1].arrivalCity.caption},&nbsp;</p>

but it keeps giving an error

Cannot read property 'caption' of undefined.

It seems that I can get items from arrays with length of 2 and more (or when specifically get leg.segments[0].arrivalCity.caption but get an error when try to render array with only one item. I can't understand what the problem is since it should just return leg.segments[leg.segment[0]] when array has just one item and be fine with it.

All objects have 'caption'-key, the only question is to get it from [0] or [1] index.

The array is a part of parsed JSON, here's one element I map through for an example:

"legs" :
 [
   {
     "segments" :
       [
         {
           "arrivalCity" :
             {
               "uid" : "LED",
               "caption" : "ST PETERSBURG"
             }
         },
         {
           "arrivalCity" :
             {
               "uid" : "LON",
               "caption" : "LONDON"
             }
         }
       ]
    },
    {
       "segments" :
         [
           {
              "arrivalCity" :
                {
                  "uid" : "MOW",
                  "caption" : "MOSCOW"
                }
           }
         ]
     }
 ]

I need to render LONDON in the first case and MOSCOW in the second. But I can get ST PETERSBURG and MOSCOW with <p>{leg.segments[0].arrivalCity.caption}</p> or an error with <p>{leg.segments[leg.segments.length - 1].arrivalCity.caption}</p>

Answer 1

It is unable to reproduce your problem. Please show us your array.

Assuming your array is,

var leg={segments:[{arrivalCity:{caption:"cap1"}}]};

Then if you run;

leg.segments[leg.segments.length - 1].arrivalCity.caption

You will see the expected output as 'cap1'

Answer 2

... quoting the OP ...

... <p>{leg.segments[0].arrivalCity.caption}</p> or ... <p>{leg.segments[leg.segments.length - 1].arrivalCity.caption}</p>

The misunderstanding might be due to not treating legs like an array . Thus, in order to always access the last arrivalCity item of each of a segments array, one has to iterate the legs array in first place.

Using the OP's sample data and implementing a basic render function which does iterate the legs array first and only with each iteration does access always the last item of the current segments array via eg segmentList[segmentList.length - 1] , as already done correctly by the OP, nothing will fail but the expected result will render ...

• LONDON
• MOSCOW

... example ...

 function renderListOfLastArrivalCities(dataList) { const listNode = document.querySelector('.last-arrivals'); dataList.forEach(({ segments: segmentList }) => { //const lastSegmentItem = segmentList[segmentList.length - 1]; //const arrivalCity = lastSegmentItem && lastSegmentItem.arrivalCity; const arrivalCity = segmentList[segmentList.length - 1]?.arrivalCity; if (arrivalCity) { const itemNode = document.createElement('li'); itemNode.textContent = arrivalCity.caption || ''; listNode.appendChild(itemNode); } }) } const legs = [{ "segments": [{ "arrivalCity": { "uid":"LED", "caption":"ST PETERSBURG" } }, { "arrivalCity": { "uid":"LON", "caption":"LONDON" } }] }, { "segments": [{ "arrivalCity": { "uid":"MOW", "caption":"MOSCOW" } }] }]; renderListOfLastArrivalCities(legs);

 <ul class="last-arrivals"></ul>

Answer 3

Seems like your leg.segments[leg.segments.length - 1] which i assume be as object that doesn't have arrivalCity property. If it has then you must be doing any typo or maybe your data shape is different.

Could you share your array with us to take a look over it.