How to put json list values underneath each other?

Question

I'm trying to put my json file list values underneath each other, now they show up in the html webpage next to each other

I put the json file in a js variable this is one of the json property lists

{
      "title": "super_mario_64",
      "material": "plastic",
      "game_console": [
        "nintendo_ds",
        "nintendo_dsi",
        "nintendo_2D",
        "nintendo_3D(XL)"
      ],
      "color": "grey",
      "operational": true,
      "owners": {
          "name_previous_owner": "unknown",
          "name_current_owner": "donna"
      },
      "image": "images/supermario64.jpg",
    },

so the value 'game_console' shows up next to each other and not underneath each other, how can i fix this? (using either css or js?)

i put the json file in a variable called gamedata

i called the json file in js like this:

window.onload= () => {
  for (var i = 0; i < gamedata.length; i++){

  var oneGame = gamedata[i];
  console.log(i, oneGame);

  var card = document.createElement("div");
  card.className = "game-card";

  var game_console = document.createElement("h3"); 
  game_console.innerText = oneGame.game_console;
  game_console.className = "console-name";

  card.append(game_console);

  document.body.append(card);

Answer 1

This needs to be a loop:

var game_console = document.createElement("h3"); 
game_console.innerText = oneGame.game_console;
game_console.className = "console-name";

You are setting the inner HTML to oneGame.game_console which is joining the entire array. You want each individual console name.

oneGame.game_console.forEach(console => {
  var consoleName = document.createElement("h3");
  consoleName.innerText = console
  consoleName.className = 'console-name';

  gameCard.appendChild(consoleName); // Append each `h3` to the parent `div`
});

Example

 const gameData = [{ "title": "super_mario_64", "material": "plastic", "game_console": [ "nintendo_ds", "nintendo_dsi", "nintendo_2D", "nintendo_3D(XL)" ], "color": "grey", "operational": true, "owners": { "name_previous_owner": "unknown", "name_current_owner": "donna" }, "image": "images/supermario64.jpg", }]; const gameCards = document.querySelector('.game-cards'); gameData.forEach((oneGame, index) => { const gameCard = document.createElement('div'); gameCard.className = 'game-card'; const gameTitle = document.createElement('h2'); gameTitle.innerText = oneGame.title gameTitle.className = 'game-title'; gameCard.appendChild(gameTitle); oneGame.game_console.forEach(console => { const consoleName = document.createElement('h3'); consoleName.innerText = console consoleName.className = 'console-name'; gameCard.appendChild(consoleName); }); gameCards.appendChild(gameCard); });

 <div class="game-cards"></div>