Question

114

Cannot read properties of undefined (reading 'size')

rated 0 times [ 118] [ 4] / answers: 1 / hits: 7100 / 3 Years ago, thu, september 16, 2021, 12:00:00

I have 2 arrays. I'm using a for loop on arr1 and checking if arr2 contains some of the same shoe sizes as in arr1. If the condition checks that a shoe size from arr1 does not exist in arr2, then it will push an object ({size: '-'}) to the newArr, if it does exist it will just push the shoe object from arr2 into newArr

code:

const newArr = []

    const arr1 = [

        { size: 'US 3' },

        { size: 'US 4' },

        { size: 'US 5' },

        { size: 'US 6' },

        { size: 'US 7' },

        { size: 'US 8' },

        { size: 'US 9' },

        { size: 'US 10' },

        { size: 'US 11' },

        { size: 'US 12' },

        { size: 'US 13' },

        { size: 'US 14' },

        { size: 'US 15' },

        { size: 'US 16' }

    ]

    const arr2 = [

        { size: '4', cost: '170' },

        { size: '6', cost: '75' },

        { size: '7', cost: '75' },

        { size: '8', cost: '78' },

        { size: '9', cost: '80' },

        { size: '10', cost: '85' },

        { size: '11', cost: '73' },

        { size: '12', cost: '77' },

        { size: '14', cost: '100' }

    ]



     for (const arr1Item in arr1) {

         let arr1Size = arr1[arr1Item].size

         let includes = arr1Size.includes(arr2[arr1Item].size);

    

         if(includes) {

           newArr.push(arr2[arr1Item])

         } else {

           newArr.push({size: '-'})

         }

      }

 

 console.log(newArr)

The problem is whenever I run this I get this error: TypeError: Cannot read properties of undefined (reading 'size')

This error is happening because of this code here:

arr2[arr1Item].size

The thing I'm confused about is if I console.log(arr2[arr1Item]) INSIDE the for loop, it returns each object from arr2 with no error, only gives an error when I add .size.

I've been stuck on this for a bit, would appreciate any help. Thank you.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaitlynnb

Add To Favorites

Follow

Total Points: 402

Total Questions: 96

Total Answers: 109

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

kaitlynnb questions

1 'node_modules' is not recognized as an internal or external command, operable program or batch file

Tue, Oct 12, 21, 00:00, 3 Years ago

1 How to Disable the ENTER Key in React Material UI Autocomplete form

Thu, Aug 26, 21, 00:00, 3 Years ago

1 Get only specific values in array of objects in JavaScript

Tue, Jun 23, 20, 00:00, 4 Years ago

1 Extracting parts of a text in Cypress

Mon, May 20, 19, 00:00, 5 Years ago

1 Draw country border on leaflet map using JSON coordinates

Fri, Mar 22, 19, 00:00, 5 Years ago

View All

answered 3 Years ago darleneh · Accepted Answer

You iterate over arr1 using the index variable arr1Item, but then use that to index into arr2. As arr1 has more elements than arr2, you end up trying to accessarr2[9] === undefined and undefined does not have a size attribute hence the error TypeError: Cannot read properties of undefined (reading 'size').

Couple of other problems

newArr is not a const.

Array.protoype.includes() is used to see if, say, 4 of arr2.size matches arr.size like US 4 but this will also incorrectly (substring) match US 14.

Potential solution

Using the fact that both arr1 & arr2 are sorted by the (normalized) size attribute, and that the set of (normalized) arr2.size is a subset of (normalized) arr1.size you can do the transformation in linear time (O(arr1.length)):

const arr1 = [

    { size: 'US 3' },

    { size: 'US 4' },

    { size: 'US 5' },

    { size: 'US 6' },

    { size: 'US 7' },

    { size: 'US 8' },

    { size: 'US 9' },

    { size: 'US 10' },

    { size: 'US 11' },

    { size: 'US 12' },

    { size: 'US 13' },

    { size: 'US 14' },

    { size: 'US 15' },

    { size: 'US 16' }

]

const arr2 = [

    { size: '4', cost: '170' },

    { size: '6', cost: '75' },

    { size: '7', cost: '75' },

    { size: '8', cost: '78' },

    { size: '9', cost: '80' },

    { size: '10', cost: '85' },

    { size: '11', cost: '73' },

    { size: '12', cost: '77' },

    { size: '14', cost: '100' }

]



let newArr = []

for(let i1 = 0, i2 = 0; i1 < arr1.length; i1++) {

        if(i2 < arr2.length && arr1[i1].size.substr(3) === arr2[i2].size) {

                newArr.push(arr2[i2]);

                i2++;

        } else {

                newArr.push({size: '-'});

        }

}

console.log(newArr)