如何从对象中循环值并以HTML呈现出来？

问题描述

好的，我是一个认真的菜鸟，我整天都在研究，似乎找不到解决方法。我有一个对象，其中包含多个试图在循环中呈现的数据。

            var domainName = 'mywebsite.com'    

            var games = [

                {
                    name: 'name1',url: "https://www" + domainName + "/game.html",imgFile: 'img1.jpg'
                },{
                    name: 'name2',imgFile: 'img2.jpg'
                },];

在世界上，我如何使用循环来拉取数据以自动生成

<h1>name1</h1>
<a href="url"></a>
<img src="img1" />

<h1>name2</h1>
<a href="url"></a>
<img src="img2" />

任何帮助将不胜感激。我知道这可能真的很简单，我太新了，无法找到潜在客户。 ：（

解决方法

可以轻松使用：

 let renderedHtml=games.map(function(item){
       return `<h1>${item.name}</h1><a href="${item.url}"></a><img src="${item.imgFile}"/>`
    });

,

如果使用的是Vanilla JavaScript，则可以使用JavaScript映射函数遍历数组内的每个对象。

还可以使用JS的createElement（）方法创建元素，并且可以更改各个元素的属性并将其附加到DOM。

E: Failed to fetch http://security.ubuntu.com/ubuntu/pool/universe/p/python3.6/python3.6-venv_3.6.9-1~18.04ubuntu1.1_amd64.deb  404  Not Found [IP: 91.189.88.152 80]
E: Unable to fetch some archives,maybe run apt-get update or try with --fix-missing?

,

test_df <- data.frame(date,close)
test_df <- type.convert(test_df)

,

var domainName = 'mywebsite.com'    
var games = [
    {
        name: 'name1',url: "https://www" + domainName + "/game.html",imgFile: 'img1.jpg'
    },{
        name: 'name2',imgFile: 'img2.jpg'
    },];

var element = document.querySelector('#myDiv');
games.forEach((v)=>{
    element.innerHTML += `
        <h1>${v.name}</h1>
        <a href="${v.url}">${v.url}</a>
        <img src="${domainName}/${v.img}">`;
});