无法将 JSON 值分配给 HTML 中的变量

Question

我创建了一个带有变量的 JSON 文件。但我无法将值分配给 JSON 中的变量。

我的 HTML 文件是：--

<div class="col-xs-9 text-right">
 <div class="huge">
    <p id="demo"></p>
 </div>
 <div>Total</div>
</div>

我的 Javascript 是：--

<script>
      var text = 'http://localhost:8080/SampleGUI/total.txt';
      var obj = JSON.parse('text');
      document.getElementById("demo").innerHTML = obj.total; 

</script> 

我的 JSON 是：--

  {
     "text": {
      "total":"19838"
  }

}

我的 HTML 变量分配不断收到无效字符错误。

你能帮帮我吗？

问候。

Answer 1

不应该是：

 document.getElementById("demo").innerHTML = obj.text.total; 

Answer 2

当你说

var obj = JSON.parse('text');

您正在解析字符串 "text"，它不是有效的 JSON。

例如：

$ node
> JSON.parse("text")
SyntaxError: Unexpected token

也许您的意思是解析名为 text 的变量中的 JSON 字符串，因此请删除引号。

这应该会让你朝着正确的方向前进：

$ node
> var text = '{ "text": { "total": "19838" } }'
undefined
> JSON.parse(text).text.total
'19838'

Answer 3

由于您尝试获取文件，因此您可能希望使用 XMLHttpRequest 进行检索，所以这样的事情可以做到 "untested:

var xmlhttp = new XMLHttpRequest();
var url = "http://localhost:8080/SampleGUI/total.txt";

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        console.log("response",xmlhttp.responseText);
        var obj = JSON.parse(xmlhttp.responseText);
        document.getElementById("demo").innerHTML = obj.text.total; 
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

如果您使用类似这样的 jquery

$.getJSON("http://localhost:8080/SampleGUI/total.txt", function(data) {

    $("#demo").text = data.text.total; 
});

我附上了一个工作的 jsfiddle http://jsfiddle.net/nk0ynou1/