Question

我有一个html代码，我们从json文件中打印多行。但是，代码似乎不仅仅是有一行。如何编辑我的代码以允许打印多个用户。

<!DOCTYPE html>
<html>
<head>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var jobj=JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML=""; //clear text
        document.getElementById("demo").innerHTML+= "User Name"+":"+jobj['uname']+"<br>";
        document.getElementById("demo").innerHTML+= "Status"+":"+jobj['status']+"<br>";
    }
  };
  xhttp.open("GET", "my_data.json", true);
  xhttp.send();
}
</script>
</head>
<body>
    <h2>My Contacts</h2>
    <button type="button" onclick="loadDoc()">Get Contacts</button>
    <div id="demo"></div>
 </body>
</html>

这是json文件

{"uname":"Sam","status":"idle"}
{"uname":"Tom","status":"not idle"}
{"uname":"Bob","status":"idle"

}

Answer 1

这是一种简单的方法。只需使用forEach或for(...)循环遍历数组中的每个对象。

let data = [{"uname":"Sam","status":"idle"},
{"uname":"Tom","status":"not idle"},
{"uname":"Bob","status":"idle"}],
demo = document.getElementById("demo")

data.forEach( obj => demo.innerHTML += `Name: ${obj.uname}, Status: ${obj.status}<br>`)

<div id="demo"></div>

更多信息：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration

Answer 2

您可以通过以下方式将此字符串拆分为数组：

var lines = this.responseText.split("\n")

然后遍历这些并解析每个。您从该文件中读取的整个字符串不是有效的json，但每行都是。

如何从json文件中打印多行？

2 个答案: