Javascript 如何将json列表值放在彼此下面？

我试图将我的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",
    },

所以“游戏控制台”的值显示在彼此的旁边，而不是在彼此的下面，我如何解决这个问题？（使用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);

window.onload=（）=>{
对于（var i=0；i

这需要是一个循环：

var game_console=document.createElement（“h3”）；
game_console.innerText=oneGame.game_console；
game_console.className=“控制台名称”；

您正在将内部HTML设置为加入整个数组的

oneGame.game\u console

。您需要每个单独的控制台名称

oneGame.game\u console.forEach（console=>{
var consoleName=document.createElement（“h3”）；
consoleName.innerText=控制台
consoleName.className='console name'；
gameCard.appendChild（consoleName）；//将每个'h3'附加到父'div`
});

例子

const gameData=[{
“头衔”：“超级马里奥64”，
“材料”：“塑料”，
“游戏机”：[
“任天堂ds”，
“任天堂dsi”，
“任天堂2D”，
“任天堂3D（XL）”
],
“颜色”：“灰色”，
“可操作”：没错，
“业主”：{
“名称前所有者”：“未知”，
“当前所有者姓名”：“donna”
},
“image”：“images/supermari64.jpg”，
}];
const gameCards=document.querySelector（“.game cards”）；
gameData.forEach（（一个游戏，索引）=>{
const gameCard=document.createElement（'div'）；
gameCard.className='游戏卡'；
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=控制台
consoleName.className='console name'；
gameCard.appendChild（控制台名称）；
});
gameCards.appendChild（gameCard）；
})；

---

这需要是一个循环：

var game_console=document.createElement（“h3”）；
game_console.innerText=oneGame.game_console；
game_console.className=“控制台名称”；

您正在将内部HTML设置为加入整个数组的

oneGame.game\u console

。您需要每个单独的控制台名称

oneGame.game\u console.forEach（console=>{
var consoleName=document.createElement（“h3”）；
consoleName.innerText=控制台
consoleName.className='console name'；
gameCard.appendChild（consoleName）；//将每个'h3'附加到父'div`
});

例子

const gameData=[{
“头衔”：“超级马里奥64”，
“材料”：“塑料”，
“游戏机”：[
“任天堂ds”，
“任天堂dsi”，
“任天堂2D”，
“任天堂3D（XL）”
],
“颜色”：“灰色”，
“可操作”：没错，
“业主”：{
“名称前所有者”：“未知”，
“当前所有者姓名”：“donna”
},
“image”：“images/supermari64.jpg”，
}];
const gameCards=document.querySelector（“.game cards”）；
gameData.forEach（（一个游戏，索引）=>{
const gameCard=document.createElement（'div'）；
gameCard.className='游戏卡'；
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=控制台
consoleName.className='console name'；
gameCard.appendChild（控制台名称）；
});
gameCards.appendChild（gameCard）；
})；