Javascript 在html中读取JSON_Javascript_Html_Json

Javascript 在html中读取JSON

javascript html json

Javascript 在html中读取JSON,javascript,html,json,Javascript,Html,Json,我想做的应该很简单，但不知怎么的，我就是不能让它工作因此，我有以下JSON文件jsonFile.JSON： { "level1":"elemet1", "level2":"element2", "level3":{ "testing":"element3" } } var http = require('http'); var fs =require('fs'); var server = http.createServer(fun

我想做的应该很简单，但不知怎么的，我就是不能让它工作

因此，我有以下JSON文件

jsonFile.JSON

：

{
    "level1":"elemet1",
    "level2":"element2",
    "level3":{
        "testing":"element3"
    }
}

    var http = require('http');
var fs =require('fs');


var server = http.createServer(function(req,res){
    console.log('request was made : '+req.url);
    res.writeHead(200,{'Content-Type':'text/html'});
    var myReadStream  = fs.createReadStream(__dirname +'/index.html','utf8');
    myReadStream.pipe(res);
});

server.listen('3000','127.0.0.1');

console.log('listening to 3000');

我想访问其中的数据，使用像这样的HTML页面

index.HTML

：

    <!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>

    <title>JSON Example</title>

</head>
<body>

    <div id="data1">Level 1 value :  </div>    
    <div id="data2">Level 2 value :  </div> 
    <div id="data3">Level 3 value :  </div> 





    <script>
        function loadJSON(callback) {   

        var xobj = new XMLHttpRequest();
            xobj.overrideMimeType("application/json");
        xobj.open('GET', 'jsonFile.json', true); // Replace 'my_data' with the path to your file
        xobj.onreadystatechange = function () {
              if (xobj.readyState == 4 && xobj.status == "200") {
                // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
                callback(xobj.responseText);
              }
        };
        xobj.send(null);  
        }

        function init() {

         loadJSON(function(response) {
          // Parse JSON string into object
            var actual_JSON = JSON.parse(response); 

            for (var key in actual_JSON) {
                var innerkey = actual_JSON[key];
                for (var inner in innerkey) {
                     document.getElementById('data1').innerHTML += 'Level 1 value'+innerkey[inner]['level1']+'<br>';
                     document.getElementById('data2').innerHTML += 'Level 2 value: '+innerkey[inner]['level2']+'<br>';
                     document.getElementById('data2').innerHTML += 'Level 3 value: '+innerkey[inner]['level3']+'<br>';
                }   
            }   
         }); 
        }
        init();
        </script>

</body>
</html>

为了解决这个问题，我现在使用一个

node.js

server

app.js

：

{
    "level1":"elemet1",
    "level2":"element2",
    "level3":{
        "testing":"element3"
    }
}

    var http = require('http');
var fs =require('fs');


var server = http.createServer(function(req,res){
    console.log('request was made : '+req.url);
    res.writeHead(200,{'Content-Type':'text/html'});
    var myReadStream  = fs.createReadStream(__dirname +'/index.html','utf8');
    myReadStream.pipe(res);
});

server.listen('3000','127.0.0.1');

console.log('listening to 3000');

现在使用以下命令调用

app.js

：

node app.js

拨打地址：127.0.0.1:3000

以下是我得到的错误：

Uncaught SyntaxError: Unexpected token < in JSON at position 0
at JSON.parse (<anonymous>)
at (index):38
at XMLHttpRequest.xobj.onreadystatechange ((index):28)

Uncaught SyntaxError:JSON中位置0处的意外标记<
在JSON.parse（）处
at（索引）：38
位于XMLHttpRequest.xobj.onreadystatechange（（索引）：28）

再说一遍，我想应该很简单，但我不知道我在这里错过了什么！提前感谢您的帮助

使用库：

问题是无论用户请求的URL是什么，您总是返回

index.html

。尝试打开

http://localhost:3000/jsonFile.json

在浏览器中：您将看到HTML文件的内容，而不是预期的json

让我用你自己的代码来证明我的观点：

var server = http.createServer(function(req,res){
    console.log('request was made : '+req.url);
    var myReadStream;

    // If the user requests the json file...
    if (req.url.endsWith('jsonFile.json')) {
        // ...get the json file, NOT the index.html
        myReadStream  = fs.createReadStream(__dirname +'/jsonFile.json', 'utf8');
    } else {
        myReadStream  = fs.createReadStream(__dirname +'/index.html', 'utf8');
    }
    res.writeHead(200,{'Content-Type':'text/html'});
    myReadStream.pipe(res);
});

有更好的方法来创建此服务器。看一看

修复此问题后，您必须查看javascript循环，但变量

actual_JSON

将包含JSON文件的内容。

仍然不知道如何正确执行，但至少服务器现在正在工作！谢谢你的帮助！