Блог

Главная - Вопросы по программированию - Как мне зациклить значения из объекта и отобразить их в HTML?

Как мне зациклить значения из объекта и отобразить их в HTML?

#javascript

#javascript

Вопрос:

Хорошо, я серьезный новичок, и я исследовал весь день и, похоже, не могу найти решение. У меня есть объект, который содержит несколько данных, которые я пытаюсь отобразить в цикле.

             var domainName = 'mywebsite.com'    

            var games = [

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



            ];

Как мне использовать цикл для извлечения этих данных для автоматического создания

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

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

буду признателен за любую помощь. Я знаю, что это может быть что-то очень простое, я просто слишком новичок, чтобы найти зацепку. 🙁

Ответ №1:

можно легко использовать :

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

Ответ №2:

Если вы используете ванильный JavaScript, вы можете использовать функцию JavaScript map для перебора всех объектов внутри массива.

Также для создания элементов вы можете использовать метод createElement() JS, и вы можете изменять свойства соответствующих элементов и добавлять их в DOM.

 games.map((game) => {
  var h2 = document.createElement('H2'); // create <h2> element
  h2.innerHTML = game.name;
  document.body.appendChild(h2); // append to the DOM

  var a = document.createElement('A'); //create <a> element
  a.innerHTML = game.name;
  a.href = game.url
  document.body.appendChild(a);

  var img = document.createElement('img'); //create <img> element
  img.src = game.imgFile;
  document.body.appendChild(img);
})

Ответ №3:

 var domainName = '.mywebsite.com';

var games = [{
    name: 'name1',
    url: "https://www"   domainName   "/game.html",
    imgFile: 'img1.jpg'
  },

  {
    name: 'name2',
    url: "https://www"   domainName   "/game.html",
    imgFile: 'img2.jpg'
  },

];



for (i = 0; i < games.length; i  ) {
  document.write(

    '<h1>'   games[i].name   '</h1>'  
    '<a href="'   games[i].url   '"></a>'  
    '<img src="'   games[i].imgFile   '" />'

  );
}

Ответ №4:

 var domainName = 'mywebsite.com'    
var games = [
    {
        name: 'name1',
        url: "https://www"   domainName   "/game.html",
        imgFile: 'img1.jpg'
    },
    {
        name: 'name2',
        url: "https://www"   domainName   "/game.html",
        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}">`;
});