我有一个值数组,我想放在UL中。具体来说是这样的:来自错误的另一个obj /信息
有没有一种方法可以从数组中导入图像,如何将数组导入列表中?
<div>
<ul id=cakeList>
</ul>
</div>
let cakes = [
{
"ID":"Strawberry" ,
"Name": "Vanilla Strawberry Cake",
"Eggs":false,
"Time":45,
"IMG":"https://cdn.shortpixel.ai/spai/q_glossy+ret_img+to_webp/https://omgchocolatedesserts.com/wp-content/uploads/2016/03/Strawberry-Shortcake-2.jpg" },
{
"ID": "choco1" ,
"Name": "Chocolate cake",
"Eggs":true,
"Time":120,
"IMG":"https://www.bbcgoodfood.com/sites/default/files/styles/recipe/public/recipe_images/recipe-image-legacy-id--1043451_11.jpg?itok=Z_w2WOYB", },
{
"ID": "cheesecake1" ,
"Name": "Strawberry cheesecake",
"Eggs":false,
"Time":30,
"IMG":"https://www.bbcgoodfood.com/sites/default/files/recipe-collections/collection-image/2013/05/recipe-image-legacy-id-1028453_10.jpg" },
];
function createList() {
var list = document.createElement('ul');
for (var i = 0; i < cakes.length; i++) {
for(var j=0, len2=cakes[i].length; j<len2; j++){
var item = document.createElement('li');
item.appendChild(document.createTextNode(cakes[i][j]));
list.appendChild(item);
}
return list;
}
}
document.getElementById('cakeList').appendChild(createList(cakes[i][1]));
[第一件事是该数组不是多维数组,而是对象的简单数组。因此,您需要做的是首先访问每个对象本身,然后访问要显示的属性:
function createList() {
var list = document.createElement('ul');
cakes.forEach(function(cake){
var item = document.createElement('li');
item.appendChild(document.createTextNode(cake.ID));
list.appendChild(item);
})
return list
}
document.getElementById('cakeList').appendChild(createList());
```