Question

我创建了一个对象数组：

// A string
let string = "foo";

// A matching regex (not the case in the original post)
let regex = /foo/;

// Does it match? Note there's two pairs of [] 
// that shouldn't be there in the original post.
let result = _.invoke(string, "match", regex);

// ["foo"]
console.log(result);

let games = [{
    title: 'God of War',
    price: 50,
    img: "./assets/images/God-of-War.jpg"
  },
  {
    title: 'Death Stranding',
    price: 70,
    img: "./assets/images/Death-Stranding.jpg"
  },
  {
    title: 'The Last Of Us 2',
    price: 40,
    img: "./assets/images/The-Last-Of-Us-2.jpg"
  }
];

我想将所有这些都显示为好像它们在电子商务网站中一样，但我无法在HTML中显示这些值。这是我的HTML代码：

Answer 1

所以我不确定您要做什么，但是请问这是否有帮助。这是我对您认为要实现的目标的看法：

<!DOCTYPE html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
        <link rel="stylesheet" href="css/bootstrap.min.css">
      <meta name="viewport" content="width=device-width, user-scalable=no">
        <link rel="stylesheet" href="css/style.css">
        <title>Vini Game Store</title>
    </head>
    <body>
        <h1>Games</h1>
    <div id = "game1"></br>
    <div id = "game2"></br>
    <div id = "game3">

    <script>
    let games = [];//array goes here

    var game1 = document.getElementById('game1');
    var game2 = document.getElementById('game2');
    var game3 = document.getElementById('game3');

    game1.innerHTML = games[0].title + ', price:' + games[0].price;
    game2.innerHTML = games[1].title + ', price:' + games[1].price;
    game3.innerHTML = games[2].title + ', price:' + games[2].price;
    </script>
    </body> 
</html>

Answer 2

使用JavaScript的forEach遍历数组：

let games = [{
    title: 'God of War',
    price: 50,
    img: "./assets/images/God-of-War.jpg"
  },
  {
    title: 'Death Stranding',
    price: 70,
    img: "./assets/images/Death-Stranding.jpg"
  },
  {
    title: 'The Last Of Us 2',
    price: 40,
    img: "./assets/images/The-Last-Of-Us-2.jpg"
  }
];

function displayGames() {
  var result = '';
	games.forEach(function(game) {
    result += '<div class="item col-sm-4"><h2>' + game.title + '</h2><div><img class="img-fluid" src="' + game.img + '"></div><p class="text-right">' + game.price + '</p></div></div>';
});

document.getElementById('container').innerHTML = result;

}

displayGames();

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<div id="container" class="row"></div>

Answer 3

您最好的选择是迭代games对象：

let games = [{
    title: 'God of War',
    price: 50,
    img: "./assets/images/God-of-War.jpg"
  },
  {
    title: 'Death Stranding',
    price: 70,
    img: "./assets/images/Death-Stranding.jpg"
  },
  {
    title: 'The Last Of Us 2',
    price: 40,
    img: "./assets/images/The-Last-Of-Us-2.jpg"
  }
];

function makeTable() {
  var results = '';
  var table = document.getElementById('dataTable');
  var tableBody = table.getElementsByTagName('tbody')[0];

  for (var i = 0; i < games.length; i++) {
    results += '<tr><td>' + games[i].title + '</td><td>' + games[i].price + '</td><td><img src="' + games[i].img + '"></td></tr>';
  }


  tableBody.innerHTML = results;

}


makeTable();

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="container">
  <table class="table table-bordered my-2" id="dataTable">
    <thead>
      <tr>
        <th>Title</th>
        <th>Price</th>
        <th>Image</th>
      </tr>
    </thead>
    <tbody></tbody>
  </table>
</div>

Answer 4

我将使用what I would normally的简化版本，因为我觉得您是javascript新手。

我喜欢将HTML和javascript分开。通常，我会在HTML中创建一个模板，将其克隆并使用。我通常也会使用document fragment，所以我只会更新一次DOM。

为了简单起见，我将使用template literal并跳过文档片段

var games = [{
    title: 'God of War',
    price: 50,
    img: "./assets/images/God-of-War.jpg"
  },
  {
    title: 'Death Stranding',
    price: 70,
    img: "./assets/images/Death-Stranding.jpg"
  },
  {
    title: 'The Last Of Us 2',
    price: 40,
    img: "./assets/images/The-Last-Of-Us-2.jpg"
  }
];

function buildGames(parent, games) {
  var html = "";
  games.forEach(function(game) {
    //Set Our Itemp template
    let itemTemplate = `
  <li>
     <h2>${game.title}</h2>
     <div class="price">Price: $ ${game.price}</div>
     <img src="${game.img}" alt="Image of ${game.title}" />
  </li>`;
    //update the html 
    html += itemTemplate
  });
  //Update the parent once
  parent.innerHTML += html;
}

buildGames(document.getElementById("gamesList"), games);

#gamesList {
  list-style: none;
  padding-left: 0;
}

#gamesList li {
  width: 200px;
  display: inline-block;
  border-radius: 15px;
  box-shadow: 2px 2px 4px #333;
  margin-right: 5px;
  margin-top: 8px;
  padding:10px;
}

<h1>Games</h1>
<ul id="gamesList">
</ul>

在数组中将对象值显示为HTML

4 个答案: