将对象数组显示为不带括号的 html答案

【问题标题】：display object array as html with out brackets将对象数组显示为不带括号的 html
【发布时间】：2021-03-16 09:21:57
【问题描述】：

您好，我在 JavaScript 中创建了一个对象数组。我正在尝试将对象数组显示为不带括号的 html。但是我今天才开始学习javascript，我不知道我该怎么做。

let servers = [
 { id: '12345', name: 'server #1', players: 1  },
 { id: '123456', name: 'server #2', players: 2 },
 { id: '1234567', name: 'server #3', players: 3 },
 { id: '1234568', name: 'server #4', players: 4 },
 { id: '1234569', name: 'server #5', players: 5 }
];

document.getElementById("online").innerHTML = JSON.stringify(servers);

&lt;div id="online"&gt;&lt;/div&gt;

我如何尝试显示它：

id: 12345, name: server #1, players: 1
id: 123456, name: server #2, players: 2
id: 1234567, name: server #3, players: 3
id: 1234568, name: server #4', players: 4
id: 1234569, name: server #5, players: 5

如果有人能指出我正确的方向，我将不胜感激

【问题讨论】：

标签： javascript html arrays object

【解决方案1】：

作为循环遍历返回数组的替代方法，如果您想保持使用 JSON.stringify() 的方法，您可以执行以下操作：

const servers = [
 { id: '12345', name: 'server #1', players: 1  },
 { id: '123456', name: 'server #2', players: 2 },
 { id: '1234567', name: 'server #3', players: 3 },
 { id: '1234568', name: 'server #4', players: 4 },
 { id: '1234569', name: 'server #5', players: 5 }
];

function formatJsonString(str) {
  const reNewLineInsertPoints = /},/g;
  const reDeletions = /{|}|\[|\]|"/g;
  const reSpaceInsertPoints = /(:|,)/g;

  return str.trim()
    .replace(reNewLineInsertPoints, '<br />')
    .replace(reDeletions, '')
    .replace(reSpaceInsertPoints, '$1 ');
}

document.getElementById("online").innerHTML = formatJsonString(JSON.stringify(servers));

&lt;div id="online"&gt;&lt;/div&gt;

我为可读性和可重用性创建了一个单独的函数，但这不是绝对必要的；你可以这样做：

document.getElementById("online").innerHTML = JSON.stringify(servers)
  .trim()
  .replace(/},/g, '<br />')
  .replace(/{|}|\[|\]|"/g, '')
  .replace(/(:|,)/g, '$1 ')

【讨论】：

【解决方案2】：

这适用于您的 json 中的许多属性。

let servers = [
 { id: '12345', name: 'server #1', players: 1  },
 { id: '123456', name: 'server #2', players: 2 },
 { id: '1234567', name: 'server #3', players: 3 },
 { id: '1234568', name: 'server #4', players: 4 },
 { id: '1234569', name: 'server #5', players: 5 }
];
var output = '';
for(var i = 0; i< servers.length; i++) {;
  for(var prop in servers[i]){
    output += prop + ': ' + servers[i][prop] + ', ';
  }
  output += '<br>';
}

document.getElementById("online").innerHTML = output;

&lt;div id="online"&gt;&lt;/div&gt;

【讨论】：

【解决方案3】：

let servers = [{
    id: '12345',
    name: 'server #1',
    players: 1
  },
  {
    id: '123456',
    name: 'server #2',
    players: 2
  },
  {
    id: '1234567',
    name: 'server #3',
    players: 3
  },
  {
    id: '1234568',
    name: 'server #4',
    players: 4
  },
  {
    id: '1234569',
    name: 'server #5',
    players: 5
  }
];
var getArrData = "";
for (i = 0; i < servers.length; i++) {
  getArrData += "id:" + servers[i].id + "name:" + servers[i].name + "players:" + servers[i].players + "<br>";
}
document.getElementById("online").innerHTML = getArrData;

&lt;div id="online"&gt;&lt;/div&gt;

【讨论】：

【解决方案4】：

这很容易使用和显示，
你也可以使用map()，但这里不需要它。检查差异。 https://stackoverflow.com/a/34426481/10915534

let servers = [
 { id: '12345', name: 'server #1', players: 1  },
 { id: '123456', name: 'server #2', players: 2 },
 { id: '1234567', name: 'server #3', players: 3 },
 { id: '1234568', name: 'server #4', players: 4 },
 { id: '1234569', name: 'server #5', players: 5 }
];
var rows = "";
servers.forEach(function(element,index){

   rows += "id: "+element.id + ", name: "+ element.name +", Players: "+element.players+"<br>";
})

document.getElementById("online").innerHTML = rows;

&lt;div id="online"&gt;&lt;/div&gt;

【讨论】：

【解决方案5】：

这种方法怎么样？ ? 这样您就可以轻松控制数据的显示方式。

let servers = [
 { id: '12345', name: 'server #1', players: 1  },
 { id: '123456', name: 'server #2', players: 2 },
 { id: '1234567', name: 'server #3', players: 3 },
 { id: '1234568', name: 'server #4', players: 4 },
 { id: '1234569', name: 'server #5', players: 5 }
];

var string = "";
servers.map((x) => {
  string += `id: ${x.id}, name: ${x.name}, players: ${x.players} <br />`
})

document.getElementById("online").innerHTML = string;

&lt;pre id="online"&gt;&lt;/pre&gt;

【讨论】：