如何使用变量访问item.name、item.price、item.tag、item.incart
如何使用变量访问item.name、item.price、item.tag、item.incart
提问于 2020-06-16 19:59:26
如何使用变量访问目录中的item.name、item.price、item.tag、item.incart。我已经尝试了使用DOM的所有方法。
function summary() {
myObj = `{"naturalstraight":{"name":"Natural Straight","tag":"naturalstraight","price":95,"incart":2}}` // localStorage.getItem("productsInCart");
myObj = JSON.parse(myObj);
console.log(myObj);
if (myObj && summaryContainer) {
summaryContainer.innerHTML = '';
Object.values(myObj).map(item => {
summaryContainer.innerHTML += `
<div class="product">
<ion-icon name="close-circle-outline"></ion-icon>
<img src="./images/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">$${item.price}</div>
<div class="quantity">
<span>${item.incart}</span>
</div>
<div class="total">$${item.incart * item.price},00 </div>`;
});
}
}
summary();<div class="col-50">
<div id="orderSummary">
<h2>Order summary</h2>
<div class="summary-container" style="padding-bottom: 0px;">
<div class="summary" style="width:800px">
</div>
</div>
</div>
</div>
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-06-17 13:12:06
如果我将路径添加到div，代码将正常工作
const summaryContainer = document.querySelector("#orderSummary .summary-container > .summary");
function summary() {
const summaryContainer = document.querySelector("#orderSummary .summary-container > .summary");
myObj = `{"naturalstraight":{"name":"Natural Straight","tag":"naturalstraight","price":95,"incart":2}}` // localStorage.getItem("productsInCart");
myObj = JSON.parse(myObj);
if (myObj && summaryContainer) {
summaryContainer.innerHTML = '';
Object.values(myObj).map(item => {
summaryContainer.innerHTML += `
<div class="product">
<ion-icon name="close-circle-outline"></ion-icon>
<img src="./images/${item.tag}.jpg">
<span>${item.name}</span>
</div>
<div class="price">$${item.price}</div>
<div class="quantity">
<span>${item.incart}</span>
</div>
<div class="total">$${item.incart * item.price},00 </div>`;
});
}
}
window.addEventListener("load",function() {
summary();
}) <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.1.0-0/ionicons/ionicons.esm.js"></script>
<script nomodule="" src="https://cdnjs.cloudflare.com/ajax/libs/ionicons/5.1.0-0/ionicons/ionicons.js"></script>
<div class="col-50">
<div id="orderSummary">
<h2>Order summary</h2>
<div class="summary-container" style="padding-bottom: 0px;">
<div class="summary" style="width:800px">
</div>
</div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/62407928
复制相关文章
相似问题
腾讯云开发者
