如何在JavaScript中读取外部本地JSON文件?

2020/10/08 15:41 · javascript ·  · 0评论

我已经在本地系统中保存了一个JSON文件并创建了一个JavaScript文件,以便读取JSON文件并打印出数据。这是JSON文件:

{"resource":"A","literals":["B","C","D"]}

假设这是JSON文件的路径:/Users/Documents/workspace/test.json

谁能帮我写一个简单的代码来读取JSON文件并以JavaScript打印数据?

不能让一个AJAX调用本地资源的请求是使用HTTP制成。

一种解决方法是运行本地Web服务器,提供文件并对localhost进行AJAX调用。

在帮助您编写代码以读取JSON方面,您应该阅读以下文档jQuery.getJSON()

http://api.jquery.com/jQuery.getJSON/

要使用javascript读取外部本地JSON文件(data.json),请首先创建data.json文件:

data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]';
  1. 在脚本源中提及json文件的路径以及javascript文件。

    <script type="text/javascript" src="data.json"></script>
    <script type="text/javascript" src="javascrip.js"></script>
    
  2. 从json文件获取对象

    var mydata = JSON.parse(data);
    alert(mydata[0].name);
    alert(mydata[0].age);
    alert(mydata[1].name);
    alert(mydata[1].age);
    

有关更多信息,请参见此参考

.json从硬盘加载文件是异步操作,因此需要指定一个回调函数以在文件加载后执行。

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
readTextFile("/Users/Documents/workspace/test.json", function(text){
    var data = JSON.parse(text);
    console.log(data);
});

此功能也用于加载.html.txt文件,通过重写MIME类型参数"text/html""text/plain"等等。

在Node.js的,或在浏览器中使用require.js时,你可以简单地做:

let json = require('/Users/Documents/workspace/test.json');
console.log(json, 'the json obj');

请注意:文件被加载一次,后续调用将使用缓存。

  1. 首先,创建一个json文件。在此示例中,我的文件是words.json
[{"name":"ay","id":"533"},
{"name":"kiy","id":"33"},
{"name":"iy","id":"33"},
{"name":"iy","id":"3"},
{"name":"kiy","id":"35"},
{"name":"kiy","id":"34"}]
  1. 这是我的代码,即node.js。注意:的'utf8'参数readFileSync:这使它返回的不是字符串Buffer(尽管JSON.parse可以处理),而是字符串。我正在创建服务器以查看结果...
var fs=require('fs');
var data=fs.readFileSync('words.json', 'utf8');
var words=JSON.parse(data);
var bodyparser=require('body-parser');
console.log(words);
var express=require('express');

var app=express();

var server=app.listen(3030,listening);

function listening(){
console.log("listening..");
}
app.use(express.static('website'));
app.use(bodyparser.urlencoded({extended:false}));
app.use(bodyparser.json());
  1. 当您想读取特定的ID详细信息时,可以将代码提及为:
 app.get('/get/:id',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.id){
 res.send(words[i]);
 }
}
console.log("success");
	  
});
  1. 当您输入url时,localhost:3030/get/33它将提供与该ID相关的详细信息。我的json文件具有此代码的相似名称,您可以获得一个名称详细信息....并且它没有打印所有相似名称
 app.get('/get/:name',function(req,res){
	
var i;
		 
 for(i=0;i<words.length;++i)
 {
 if(words[i].id==req.params.name){
 res.send(words[i]);
 }
}
console.log("success");
	  
});
  1. 而且,如果您想阅读类似名称的详细信息,则可以使用此代码。
app.get('/get/name/:name',function(req,res){
word = words.filter(function(val){
  return val.name === req.params.name;
});
res.send(word);
			 
 console.log("success");
	  
});
  1. 如果要读取文件中的所有信息,请使用下面的代码。
app.get('/all',sendAll);
 
 function sendAll(request,response){
 response.send(words);

 }
 

使用Fetch API是最简单的解决方案:

fetch("test.json")
  .then(response => response.json())
  .then(json => console.log(json));

它在Firefox中完美运行,但是在Chrome中,您必须自定义安全设置。

很简单。

将您的json文件重命名为“ .js”而不是“ .json”。

<script type="text/javascript" src="my_json.js"></script>

因此,请正常遵循您的代码。

<script type="text/javascript">
var obj = JSON.parse(contacts);

但是,仅作为参考,我的json内容类似于以下片段。

contacts='[{"name":"bla bla", "email":bla bla, "address":"bla bla"}]';


正如之前许多人提到的那样,使用AJAX调用无法正常工作。
但是,有一种解决方法。使用输入元素,可以选择文件。

所选文件(.json)必须具有以下结构:

[
    {"key": "value"},
    {"key2": "value2"},
    ...
    {"keyn": "valuen"},
]

<input type="file" id="get_the_file">

然后,您可以使用带有FileReader()的JS来读取文件:

document.getElementById("get_the_file").addEventListener("change", function() {
  var file_to_read = document.getElementById("get_the_file").files[0];
  var fileread = new FileReader();
  fileread.onload = function(e) {
    var content = e.target.result;
    // console.log(content);
    var intern = JSON.parse(content); // Array of Objects.
    console.log(intern); // You can index every object
  };
  fileread.readAsText(file_to_read);
});

根据您的浏览器,您可以访问本地文件。但这可能不适用于您应用程序的所有用户。

为此,您可以尝试以下方法进行操作:http : //www.html5rocks.com/zh_CN/tutorials/file/dndfiles/

加载文件后,您可以使用以下方法检索数据:

var jsonData = JSON.parse(theTextContentOfMyFile);

您可以像ES6模块一样导入它;

import data from "/Users/Documents/workspace/test.json"

如果使用本地文件,为什么不将数据打包为js对象呢?

data.js

MyData = { resource:"A",literals:["B","C","D"]}

没有XMLHttpRequests,没有解析,只需MyData.resource直接使用

只需使用$ .getJSON,然后使用$ .each来迭代键/值对。JSON文件和功能代码的内容示例:

    {
        {
            "key": "INFO",
            "value": "This is an example."
        }
    }

    var url = "file.json";         
    $.getJSON(url, function (data) {
        $.each(data, function (key, model) {
            if (model.key == "INFO") {
                console.log(model.value)
            }
        })
    });

您可以使用XMLHttpRequest()方法:

    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        //console.log("Json parsed data is: " + JSON.stringify(myObj));
       }
    };
xmlhttp.open("GET", "your_file_name.json", true);
xmlhttp.send();

您可以使用console.log语句(注释掉)查看myObj的响应。

如果您知道AngularJS,则可以使用$ http:

MyController.$inject = ['myService'];
function MyController(myService){

var promise = myService.getJsonFileContents();

  promise.then(function (response) {
    var results = response.data;
    console.log("The JSON response is: " + JSON.stringify(results));
})
  .catch(function (error) {
    console.log("Something went wrong.");
  });
}

myService.$inject = ['$http'];
function myService($http){

var service = this;

  service.getJsonFileContents = function () {
    var response = $http({
      method: "GET",
      url: ("your_file_name.json")
    });

    return response;
  };
}

如果文件在其他文件夹中,请提及完整路径而不是文件名。

由于您具有Web应用程序,因此您可能具有客户端和服务器。

如果只有浏览器,并且想从浏览器中运行的javascript读取本地文件,则意味着您只有一个客户端。出于安全原因,浏览器不应让您这样做。

但是,正如lauhub上面解释的那样,这似乎可行:

http://www.html5rocks.com/zh-CN/tutorials/file/dndfiles/

其他解决方案是在计算机上的某个位置设置Web服务器(在Windows中为微型服务器,在Linux中为Monkey),并使用XMLHttpRequest或D3库,从服务器请求文件并读取文件。服务器将从本地文件系统中获取文件,然后通过网络将其提供给您。

我喜欢Stano / Meetar上面的评论。我用它来读取.json文件。我使用Promise扩展了他们的示例。这是同样的小插曲。
https://plnkr.co/edit/PaNhe1XizWZ7C0r3ZVQx?p=preview

function readTextFile(file, callback) {
    var rawFile = new XMLHttpRequest();
    rawFile.overrideMimeType("application/json");
    rawFile.open("GET", file, true);
    rawFile.onreadystatechange = function() {
        if (rawFile.readyState === 4 && rawFile.status == "200") {
            callback(rawFile.responseText);
        }
    }
    rawFile.send(null);
}

//usage:
// readTextFile("DATA.json", function(text){
//     var data = JSON.parse(text);
//     console.log(data); 
// });


var task1 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA.json", function(text){
    var data = JSON.parse(text);
    console.log('task1 called');
    console.log(data);
    resolve('task1 came back');
    }); 
  });
};

var task2 = function (){
  return new Promise (function(resolve, reject){
    readTextFile("DATA2.json", function(text){
    var data2 = JSON.parse(text);
    console.log('task2 called');
    console.log(data2);
    resolve('task2 came back');
    });
  });
}

Promise.race([task1(), task2()])
       .then(function(fromResolve){
          console.log(fromResolve); 
       });

JSON的读取可以移到另一个函数中进行DRY;但是这里的示例更多地展示了如何使用Promise。

您必须创建一个新的XMLHttpRequest实例并加载json文件的内容。

这个技巧对我有用(https://codepen.io/KryptoniteDove/post/load-load-json-file-locally-using-pure-javascript):

 function loadJSON(callback) {   

    var xobj = new XMLHttpRequest();
        xobj.overrideMimeType("application/json");
    xobj.open('GET', 'my_data.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);  
 }

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

一种简单的解决方法是将JSON文件放入本地运行的服务器中。为此,从终端转到您的项目文件夹,并在某个端口号上启动本地服务器,例如8181

python -m SimpleHTTPServer 8181

然后浏览到http:// localhost:8181 /应该显示所有文件,包括JSON。如果还没有,请记住安装python。

如果您可以运行本地Web服务器(如上述Chris P所建议),并且可以使用jQuery,则可以尝试http://api.jquery.com/jQuery.getJSON/

您可以使用D3处理回调,并加载本地JSON文件data.json,如下所示:

<script src="//d3js.org/d3.v3.min.js" charset="utf-8"></script>

<script>
  d3.json("data.json", function(error, data) {
    if (error)
      throw error;
    console.log(data);
  });
</script>

您可以使用d3.js导入JSON文件。只需在您的html正文上调用d3:

<script src="https://d3js.org/d3.v5.min.js"></script>

然后将其放在您的js脚本中:

  d3.json("test.json").then(function(data_json) {
         //do your stuff
  })

我接受了Stano的出色回答,并将其包装成一个承诺。如果您没有诸如node或webpack之类的选项可以依靠从文件系统加载json文件,这可能会很有用:

// wrapped XMLHttpRequest in a promise
const readFileP = (file, options = {method:'get'}) => 
  new Promise((resolve, reject) => {
    let request = new XMLHttpRequest();
    request.onload = resolve;
    request.onerror = reject;
    request.overrideMimeType("application/json");
    request.open(options.method, file, true);
    request.onreadystatechange = () => {
        if (request.readyState === 4 && request.status === "200") {
            resolve(request.responseText);
        }
    };
    request.send(null);
});

您可以这样称呼它:

readFileP('<path to file>')
    .then(d => {
      '<do something with the response data in d.srcElement.response>'
    });

因此,如果您打算使用“ Apache Tomcat”托管JSON文件,

1>启动服务器后,通过转到以下URL验证您的Apache Tomcat是否已启动并正在运行:“ localhost:8080”-

在此处输入图片说明

2>接下来,转到“ webapps”文件夹-“ C:\ Program Files \ Apache Software Foundation \ Tomcat 8.5 \ webapps”。并且,创建一个项目文件夹或复制您的项目文件夹。

在此处输入图片说明

3>将您的json文件粘贴到那里。
在此处输入图片说明

4>就这样。大功告成!只需转到-“ http:// localhost:8080 / $ project_name $ / $ jsonFile_name $ .json”在此处输入图片说明

本文地址:http://javascript.askforanswer.com/ruhezaijavascriptzhongduquwaibubendijsonwenjian.html
文章标签: ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!