从多维表单中获取列表

问题描述 投票:0回答:1

我有一个值数组,我想放在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]));

https://jsfiddle.net/t0b3y0u/q9gck36o/37/

arrays image list multidimensional-array html-lists
1个回答
0
投票

[第一件事是该数组不是多维数组,而是对象的简单数组。因此,您需要做的是首先访问每个对象本身,然后访问要显示的属性:

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());
```
© www.soinside.com 2019 - 2024. All rights reserved.