Javascript 访问对象

每次尝试访问对象时，我都会在控制台中看到“未捕获的TypeError:无法读取未定义的属性'name'。谁能帮我一下我哪里做错了

function deleteButton() {

   let deleteButton = document.querySelectorAll('.products ion-icon');
   let productName;
   let productNumbers = localStorage.getItem('cartNumbers');
   let cartItems =localStorage.getItem('productsInCart');
   cartItems = JSON.parse(cartItems);

    console.log(cartItems);  

    for(let i=0; i < deleteButton.length; i++) {

        deleteButton[i].addEventListener('click',() => {
        productName=deleteButton[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');
        console.log(productName);
        console.log(cartItems[productName].name);       

     });
    }
    }



 console.log(cartItems);  // console.log is printing as 
  {naturalStraight: {…}, naturalWavy: {…}}
   naturalStraight:
   incart: 2
   name: "Natural Straight"
   price: 95
   tag: "naturalStraight"
    proto__: Object

  console.log(productName);// it is printing as 
   naturalstraight

    console.log(cartItems[productName].name); // this is printing an error as cannot read property 
       name

函数deleteButton（）{
让deleteButton=document.querySelectorAll（'.products-ion-icon'）；
让productName；
让productNumbers=localStorage.getItem（'cartNumbers'）；
让cartItems=localStorage.getItem（'productsInCart'）；
cartItems=JSON.parse（cartItems）；
控制台日志（cartItems）；
for（设i=0；i{
productName=deleteButton[i].parentElement.textContent.trim（）.toLowerCase（）.replace（//g'，）；
console.log（productName）；
console.log（cartItems[productName].name）；
});
}
}
console.log（cartItems）；//console.log正在打印为
{naturalStraight:{…}，NaturalAvy:{…}
自然光：
出生日期：2
名称：“天然直纹”
价格:95
标签：“自然光”
原型：对象
console.log（productName）；//它正在打印为
自然的
console.log（cartItems[productName].name）；//这是打印错误，因为无法读取属性
名称

下面的方法可能会奏效

let cartItems;
function deleteButton() {

    let deleteButton = document.querySelectorAll('.products ion-icon');
    let productName;
    let productNumbers = localStorage.getItem('cartNumbers');
    cartItems = localStorage.getItem('productsInCart');
    cartItems = JSON.parse(cartItems);

    console.log(cartItems);

    for (let i = 0; i < deleteButton.length; i++) {
        deleteButton[i].addEventListener('click', () => {
            productName = deleteButton[i].parentElement.textContent.trim().toLowerCase().replace(/ /g, '');
            console.log(productName);
            console.log(cartItems[productName].name);

        });
    }
}
deleteButton();
console.log(cartItems); 

let carttitems；
函数deleteButton（）{
让deleteButton=document.querySelectorAll（'.products-ion-icon'）；
让productName；
让productNumbers=localStorage.getItem（'cartNumbers'）；
cartItems=localStorage.getItem（'productsInCart'）；
cartItems=JSON.parse（cartItems）；
控制台日志（cartItems）；
for（设i=0；i{
productName=deleteButton[i].parentElement.textContent.trim（）.toLowerCase（）.replace（//g'，）；
console.log（productName）；
console.log（cartItems[productName].name）；
});
}
}
deleteButton（）；
控制台日志（cartItems）；

JavaScript区分大小写，因此“naturalstraight”和“naturalstraight”是两个不同的属性。您可以发布示例json吗？您也不能引用在函数范围内创建的内容。因此，将cartItems移动到function@JohnMontgomery对于回复，请告诉我如何使两个属性相同。@HalilÇakar您喜欢这个函数deleteButton（）{let cartimes=localStorage.getItem（'productsInCart'）；cartimes=JSON.parse（cartimes）；