display object array as html with out brackets

Question

Hello i have created an object array in JavaScript. And i'm trying to display the object array as html without the brackets. But i have only started to learn javascript today and i have no idea how i can do it.

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);

<div id="online"></div>

How i'm trying to display it:

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

If someone could point me in the right direction i would really appreciate it

score 1 · Answer 1 · answered Dec 04 '20 at 10:12

How about this approach? This way you can easily control how the data will be displayed.

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;

<pre id="online"></pre>

score 1 · Answer 2 · answered Dec 04 '20 at 10:12

This is easy to use and display,
you can also use map() but you don't need it here. Check difference. 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;

<div id="online"></div>

score 0 · Answer 3 · answered Dec 04 '20 at 10:16

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;

<div id="online"></div>

score 0 · Answer 4 · answered Dec 04 '20 at 10:19

This is for as many properties in your 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;

<div id="online"></div>

secan · Answer 5 · 2020-12-04T15:53:01.550

As an alternative to looping through the returned array, if you want to keep your approach using JSON.stringify(), you can do something like this:

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));

<div id="online"></div>

I created a separate function for readability and re-usability but it is not strictly necessary; you could simply do:

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

display object array as html with out brackets

5 Answers5