此json代码如何显示一行一行？

Question

这是我的代码。

<p id="demo"></p>

<script>
var myObj, i, j, x, l = "";
myObj = {
    "grids": [
        {"players": 
            [   {"duration": 404.9654235839844,"name": "Sam"},
                {"duration": 402.9412536621094,"name": "Tom"},
            ],
         "grid": "A1"
        },
        {"players": 
            [   {"duration": 433.0709228515625,"name": "Mary"},
                {"duration": 430.56573486328125,"name": "Peter"},
            ],
        "grid": "A2"
        }
     ]}

for (i in myObj.grids) {
  x += "<h2>" + myObj.grids[i].grid + "</h2>";
  for (j in myObj.grids[i].players) {
        for (l in myObj.grids[i].players[j].name) {
            x += myObj.grids[i].players[j].name[l] + "<br>";
        }
    }
}

document.getElementById("demo").innerHTML = x;
</script>

---

现在此代码将在每行中显示“名称”字母。 如何使它成为“ Sam”一行，“ Tom”一行？

现在它显示如下：

Answer 1

for (i in myObj.grids) {
  x += "<h2>" + myObj.grids[i].grid + "</h2>";
  for (j in myObj.grids[i].players) {
        if (myObj.grids[i].players[j].name != "undefined") {
            x += myObj.grids[i].players[j].name + "<br/>";   
        }

    }
}

Answer 2

用以下代码替换代码：

var myObj, i, j, x = "", l = "";
myObj = {
    "grids": [
        {"players": 
            [   {"duration": 404.9654235839844,"name": "Sam"},
                {"duration": 402.9412536621094,"name": "Tom"},
            ],
         "grid": "A1"
        },
        {"players": 
            [   {"duration": 433.0709228515625,"name": "Mary"},
                {"duration": 430.56573486328125,"name": "Peter"},
            ],
        "grid": "A2"
        }
     ]}

for (i in myObj.grids) {
  x += "<h2>" + myObj.grids[i].grid + "</h2>";
  for (j in myObj.grids[i].players) {
            x += myObj.grids[i].players[j].name + "<br>";
    }
}