javascript - Why do i get Undefined when i try to populate this literal template?
问题描述
I set a local storage item, an array to be more accurate.
Then I get it and try to populate my literal template but I get an undefined
undefined:1 GET http://localhost/undefined 404 (Not Found) on undefined:1
Here's my code:
var rawRelatedProductCategoryArray = localStorage.getItem('relatedCategoryProductsSelected');
var parsedRelatedProductArray = ('rawRelatedProductCategoryArray', JSON.parse(rawRelatedProductCategoryArray));
console.log(parsedRelatedProductArray); // on this i get the result of my array
document.getElementById("relatedProducts").innerHTML = `${parsedRelatedProductArray.map(relatedProductsTemplate).join('')}`
Here's the template i'm trying to put the array data in it:
function relatedProductsTemplate(relatedProduct) {
return `
<div class="relatedDiv">
<div class="item mb-0 text-center ">
<div>
<div class="post-prev-img">
<a href="#"><img src="${relatedProduct.image}" alt="img"></a>
</div>
<div class="post-prev-title mb-5">
<h3><a class="font-norm a-inv" href="shop-single.html">${relatedProduct.dataProduct}</a></h3>
</div>
<div class="shop-price-cont">
<strong>${relatedProduct.price}</strong>
</div>
</div>
</div>
</div>
`
}
解决方案
我发现我做错了什么:
问题是因为数组是嵌套的。
所以我确实喜欢这样:
var arrayNesting = parsedRelatedProductArray[0];
然后我将 var 传递给这样的文字:
document.getElementById("relatedProducts").innerHTML =
`${arrayNesting.map(relatedProductsTemplate).join('')}`
推荐阅读
- javascript - 如何在 fullcalendar 3.10 javascript 的更新/删除对话框中添加 30 分钟到 startdate
- python - 搜索固定宽度文件并使用 python 从文件中的特定位置返回搜索结果
- sql - 在 sql 中使用 varchar 列进行过滤
- solr - Solr 在基于美元的查询后无法识别集合
- c - 具有相同类型子对象的循环链表的父对象
- openlayers - Openlayers 6,从 GeoJSON 读取属性
- javascript - 节点。制作不和谐机器人时不工作
- google-cloud-storage - 无法获得 gsutil du 命令的准确结果
- python - 如何在 Python 中将数据框转换为奇数字典
- android - 如何使用 JetpackNavigation 组件从 BottomSheetDialogFragment 导航到另一个 Fragment