Length of array appears incorrect

Loading...

Length of array appears incorrect

I am creating an app using React Native and want to make a  with section headers. I've been following a few different posts which describe how to do it and I've run into a strange issue:
Part of creating the  is to make two arrays: one is an array of IDs for the Sections and another is an array of arrays made up of the Row IDs. The two arrays at their top level should have the same amount of elements in them.
I'm creating the arrays from json data:
[
  {
    "id": 12,
    "name": "Surfhouse 1",
    "guests": [
      {
        "id": 100,
        "name": "Oliver Nicholson",
        "email": "oldo.nicho123@gmail.com",
        "age": "32"
      },
      {
        "id": 101,
        "name": "Nollie Bollie",
        "email": "noldo.nicho1234@gmail.com",
        "age": "20"
      },
      {
        "id": 102,
        "name": "Wootang",
        "email": "oldo.nicho3@gmail.com",
        "age": "57"
      }
    ]
  },
  {
    "id": 25,
    "name": "Surfhouse 2",
    "guests": [
      {
        "id": 200,
        "name": "Alycia Woot",
        "email": "aly.woot@gmail.com",
        "age": "32"
      },
      {
        "id": 201,
        "name": "Tim Jang",
        "email": "noldo.nicho@gmail.com",
        "age": "20"
      },
      {
        "id": 202,
        "name": "Hootenany Yeah",
        "email": "oldo.nicho123@gmail.com",
        "age": "57"
      }
    ]
  }
]

and this in turn is mapped out with the following function (where accommodation is the imported json data):
const formatDataForListView = accommodation => {
      const dataBlob = {};
      const sectionIDs = [];
      const rowIDs = [];

      accommodation.forEach((accom) => {
        sectionIDs.push(accom.id);
        dataBlob[accom.id] = accom.name;
        rowIDs[accom.id] = []; // initialise empty array associated with Section ID
        accom.guests.forEach((guest) => {
          rowIDs[accom.id].push(guest.id);
          dataBlob[accom.id + ':' + guest.id] = guest;
        });
      });

Everything seems to be fine: I get the expected arrays, but for some reason the RowIDs array has length: 26 when (I believe) it should only be 2.

How does the rowIDs array have a length of 26?

Solutions/Answers:

Answer 1:

Because you have a value at index 12 and one at index of 25. That makes a length of the array of 26, because it takes the greatest index and add one for the length, because the array is zero based.

If you want only the two items, then use index 0 and 1 without spare items or use an object with the keys.

For more in depth reading: Relationship between length and numerical properties

Answer 2:

I would suggest that rowIDs should better be object. Intialising a particular index of an array is not good practise, we have object for key => value purpose. If you intialize a particular index in an array it would set all the previous indexes as undefined which is not good. Implementation using objects will look like this in plain javascript –

var data = [
  {
    "id": 12,
    "name": "Surfhouse 1",
    "guests": [
      {
        "id": 100,
        "name": "Oliver Nicholson",
        "email": "oldo.nicho123@gmail.com",
        "age": "32"
      },
      {
        "id": 101,
        "name": "Nollie Bollie",
        "email": "noldo.nicho1234@gmail.com",
        "age": "20"
      },
      {
        "id": 102,
        "name": "Wootang",
        "email": "oldo.nicho3@gmail.com",
        "age": "57"
      }
    ]
  },
  {
    "id": 25,
    "name": "Surfhouse 2",
    "guests": [
      {
        "id": 200,
        "name": "Alycia Woot",
        "email": "aly.woot@gmail.com",
        "age": "32"
      },
      {
        "id": 201,
        "name": "Tim Jang",
        "email": "noldo.nicho@gmail.com",
        "age": "20"
      },
      {
        "id": 202,
        "name": "Hootenany Yeah",
        "email": "oldo.nicho123@gmail.com",
        "age": "57"
      }
    ]
  }
];

 var rowIDs = {};
 
 data.forEach(function(element) {
    rowIDs[element.id] = []; 
    element.guests.forEach(function(guest) {
      rowIDs[element.id].push(guest.id);
   });
 });
console.log(rowIDs);

References

Loading...