如何将json列表值放在一起？答案

【问题标题】：How to put json list values underneath each other?如何将json列表值放在一起？
【发布时间】：2020-10-02 21:18:57
【问题描述】：

我正在尝试将我的 json 文件列表值放在一起，现在它们显示在 html 网页中并相邻

我把 json 文件放在一个 js 变量中这是 json 属性列表之一

{
      "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",
    },

所以值'game_console'显示在彼此旁边而不是彼此下方，我该如何解决这个问题？（使用 css 还是 js？）

我将 json 文件放在一个名为 gamedata 的变量中

我在js中这样调用json文件：

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

【问题讨论】：

标签： javascript html css json

【解决方案1】：

这需要是一个循环：

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

您将内部 HTML 设置为 oneGame.game_console，它正在加入整个数组。您需要每个单独的控制台名称。

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

示例

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

&lt;div class="game-cards"&gt;&lt;/div&gt;

【讨论】：