如何在页面上显示对象数组

时间:2019-01-23 04:27:21

标签: javascript html arrays object

当前,这会在页面上显示对象数组。我只希望它显示名称和点之间有一些空格。例如Player1 25。我不想要[] {}等

<p id="demo"></p>

<script>

Player1 = { name: 'Player1', points: 25 };
Player2 = { name: 'Player2', points: 50 };
Player3 = { name: 'Player3', points: 14 };

players = [Player1, Player2, Player3];

document.getElementById("demo").innerHTML = JSON.stringify(players) ;

2 个答案:

答案 0 :(得分:1)

只需遍历players,然后传播每个values的{​​{1}}:

player
var Player1 = {
  name: 'Player1',
  points: 25
};
var Player2 = {
  name: 'Player2',
  points: 50
};
var Player3 = {
  name: 'Player3',
  points: 14
};

var demo = document.getElementById("demo");

var players = [Player1, Player2, Player3];

players.forEach(player => demo.innerHTML += "<br>" + Object.values(player).join(" "));

答案 1 :(得分:0)

您可以初始化一个空字符串并创建span标签并连接结果。 jsfiddle下面是一种代码方法。

http://jsfiddle.net/trgwq7xy/

Player1 = { name: 'Player1', points: 25 };
Player2 = { name: 'Player2', points: 50 };
Player3 = { name: 'Player3', points: 14 };

players = [Player1, Player2, Player3];

html$ = '';
for(var key in players){
 html$ += '<span>'+players[key].name+', '+ players[key].points+'</span> ';
}

document.getElementById("demo").innerHTML = html$ ;