Как прочитать внешний локальный файл JSON в JavaScript?

для чтения внешнего локального файла JSON (data.json) используя javascript, сначала создайте свои данные.файл 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);
   

для получения дополнительной информации см. раздел этой ссылке.

загрузка from harddisk является асинхронной операцией, и поэтому ей необходимо указать функцию обратного вызова для выполнения после загрузки файла.

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" etc.

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. и вот мой код i.e, узел.js. Примечание до 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. когда вы хотите прочитать определенные детали ИД вы можете назовите код as..

 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. когда вы вошли в адрес localhost:3030/get/33 это даст детали, связанные с этим идентификатором....и Вы тоже читаете по имени. Мой файл json имеет simillar имена с этим кодом вы можете получить сведения об одном имени....и он не напечатал все имена simillar

 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);

 }
 

в зависимости от Вашего браузера, вы можете получить доступ к локальным файлам. Но это может не сработать для всех пользователей вашего приложения.

для этого вы можете попробовать инструкции здесь:http://www.html5rocks.com/en/tutorials/file/dndfiles/

после загрузки файла вы можете получить данные, используя:

var jsonData = JSON.parse(theTextContentOfMyFile);

вы можете просто сделать:

let json = require('/Users/Documents/workspace/test.json');

обратите внимание: файл загружается один раз, последующие вызовы будут использовать кэш.

Если вы используете локальные файлы, почему бы просто не упаковать данные как объект js?

данные.js

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

нет XMLHttpRequests, без разбора, просто использовать MyData.resource напрямую

очень удобно.
Переименуйте файл json в ".Ак" вместо ".формат 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"}]';

вы можете использовать метод 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();

вы можете увидеть ответ myObj с помощью консоли.инструкция log (комментируется).

Если вы знаете 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;
  };
}

Если у вас есть файл в другой папке, укажите полный путь вместо имени файла.

поскольку у вас есть веб-приложение, у вас может быть клиент и сервер.

Если у вас есть только ваш браузер, и вы хотите прочитать локальный файл с помощью JavaScript, который работает в вашем браузере, это означает, что у вас есть только клиент. По соображениям безопасности браузер не должен позволять вам делать такие вещи.

однако, как объяснил лаухуб выше, это, похоже, работает:

http://www.html5rocks.com/en/tutorials/file/dndfiles/

другое решение-установить где-нибудь на вашем компьютере веб-сервер (крошечный в windows или monkey в linux) и с библиотекой 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; но пример здесь больше демонстрирует, как использовать обещания.

необходимо создать новый экземпляр XMLHttpRequest и загрузить содержимое файла json.

этот совет работает для меня (https://codepen.io/KryptoniteDove/post/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 внутри локально работающего сервера. для этого с терминала перейдите в папку проекта и запустите локальный сервер на каком-нибудь порту e.g 8181

python -m SimpleHTTPServer 8181

затем перейдите к http://localhost:8181/ должен отображать все ваши файлы, включая JSON. Не забудьте установить python, если у вас его еще нет.

использование Fetch API является самым простым решением:

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

он отлично работает в Firefox, но в Chrome вам нужно настроить параметры безопасности.

Если вы можете запустить локальный веб-сервер (как Крис П предложено выше), и если вы можете использовать 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>

Как уже упоминалось ранее, это не работает с помощью вызова AJAX. Однако, есть способ обойти это. Используя элемент input, вы можете выбрать файл:

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

затем вы можете прочитать файл с помощью JS с FileReader():

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);
};
fileread.readAsText(file_to_read);
});

взял Стано-х отличный ответ и завернул его в обещание. Это может быть полезно, если у вас нет такой опции, как 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> после запуска сервера убедитесь, что ваш Apache Tomcat запущен и работает, перейдя по следующему url: "localhost:8080" -

2> Далее, перейдите к "папке webapps" - "C:\Program файлы\Apache Software Foundation\Tomcat 8.5\webapps". И создайте папку проекта или скопируйте проект папка.

3> вставьте туда свой файл json.

4> и все. Вы молодец! Просто иди к ... --35-->http://localhost:8080/$имя_проекта$/$jsonFile_name$.в JSON"