Как я могу получить JavaScript для чтения из файла .json? - PullRequest
Новая
       1

Как я могу получить JavaScript для чтения из файла .json?

29 голосов
/ 15 июля 2011

Мой скрипт сейчас выглядит так: 

<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var jsonstr = '{"date":"July 4th", "event":"Independence Day"}';
    var activity=JSON.parse(jsonstr);
    while(x<10){
    date = document.getElementById("date"+x).innerHTML = activity.date;
    event = document.getElementById("event"+x).innerHTML = activity.event;
    x++;
    }
  }
</script>

Где дата "x" и событие "x" представляют собой серию тегов html. Эта функция запускается при загрузке страницы (onload). Моя цель - сделать то же самое, только из локального файла .json, в отличие от жесткого кода, который я получил выше. Я уже проверил http://api.jquery.com/jQuery.getJSON/.

Локальный файл .json выглядит следующим образом: 

{"date":"July 4th", "event":"Independence Day"}

Есть предложения?

Ответы [ 4 ]

34 голосов
/ 15 июля 2011

Предполагая, что вы говорите "файл в локальной файловой системе", когда говорите файл .json.

Вам нужно сохранить данные json, отформатированные как jsonp, и использовать file:// url для доступа к ним.

Ваш HTML будет выглядеть так: 

<script src="file://c:\\data\\activity.jsonp"></script>
<script type="text/javascript">
  function updateMe(){
    var x = 0;
    var activity=jsonstr;
    foreach (i in activity) {
        date = document.getElementById(i.date).innerHTML = activity.date;
        event = document.getElementById(i.event).innerHTML = activity.event;
    }
  }
</script>

И файл c: \ data \ activity.jsonp содержит следующую строку: 

jsonstr = [ {"date":"July 4th", "event":"Independence Day"} ];
3 голосов
/ 31 июля 2017

Вы можете сделать это как ... Просто укажите правильный путь к вашему файлу json ... 

<!doctype html>
<html>
    <head>
        <script type="text/javascript" src="abc.json"></script>
             <script type="text/javascript" >
                function load() {
                     var mydata = JSON.parse(data);
                     alert(mydata.length);

                     var div = document.getElementById('data');

                     for(var i = 0;i < mydata.length; i++)
                     {
                        div.innerHTML = div.innerHTML + "<p class='inner' id="+i+">"+ mydata[i].name +"</p>" + "<br>";
                     }
                 }
        </script>
    </head>
    <body onload="load()">
    <div id= "data">

    </div>
    </body>
</html>

Просто получите данные и добавьте их в div ..Первоначально выведите длину в предупреждении.

Вот мой файл Json: abc.json 

data = '[{"name" : "Riyaz"},{"name" : "Javed"},{"name" : "Arun"},{"name" : "Sunil"},{"name" : "Rahul"},{"name" : "Anita"}]';
1 голос
/ 13 июля 2018

УВЕДОМЛЕНИЕ: С 12 ИЮЛЯ 2018 г. ДРУГИЕ ОТВЕТЫ ВСЕ УСТАРЕЛИ.JSONP СЕЙЧАС РАССМОТРЕЛ УЖАСНУЮ ИДЕЮ

Если у вас есть JSON в виде строки, JSON.parse() будет работать нормально.Так как вы загружаете JSON из файла, вам нужно сделать XMLHttpRequest к нему.Например (это пример w3schools.com): 

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var myObj = JSON.parse(this.responseText);
        document.getElementById("demo").innerHTML = myObj.name;
    }
};
xmlhttp.open("GET", "json_demo.txt", true);
xmlhttp.send();
<!DOCTYPE html>
<html>
<body>

<h2>Use the XMLHttpRequest to get the content of a file.</h2>
<p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>

<p id="demo"></p>


<p>Take a look at <a href="json_demo.txt" target="_blank">json_demo.txt</a></p>

</body>
</html>

Он не будет работать здесь, так как этот файл не находится здесь.Перейти к этому примеру w3schools: https://www.w3schools.com/js/tryit.asp?filename=tryjson_ajax

Вот документация для JSON.parse (): https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse

Вот краткое изложение:

Метод JSON.parse () анализирует строку JSON, создавая значение JavaScript или объект, описываемый этой строкой.Может быть предоставлена ​​дополнительная функция восстановления, чтобы выполнить преобразование результирующего объекта до его возвращения.

Вот пример, используемый: 

var json = '{"result":true, "count":42}';
obj = JSON.parse(json);

console.log(obj.count);
// expected output: 42

console.log(obj.result);
// expected output: true

Вот сводка запросов XMLHttp из https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest:

Использование объектов XMLHttpRequest (XHR) для взаимодействия с серверами.Вы можете извлечь данные из URL без необходимости полного обновления страницы.Это позволяет веб-странице обновлять только часть страницы, не нарушая при этом действия пользователя.XMLHttpRequest широко используется в Ajax-программировании.

Если вы не хотите использовать XMLHttpRequests, то способ JQUERY (который я не уверен, почему он не работает для вас) равен http://api.jquery.com/jQuery.getJSON/

Поскольку это не работает, я бы попробовал использовать XMLHttpRequests

Вы также можете попробовать AJAX-запросы: 

$.ajax({
    'async': false,
    'global': false,
    'url': "/jsonfile.json",
    'dataType': "json",
    'success': function (data) {
        // do stuff with data
    }
});

Документация: http://api.jquery.com/jquery.ajax/

0 голосов
/ 20 июля 2018

На самом деле вы ищете AJAX CALL, в котором вы замените значение параметра URL ссылкой на файл JSON для получения значений JSON. 

$.ajax({
    url: "File.json", //the path of the file is replaced by File.json
    dataType: "json",
    success: function (response) {
        console.log(response); //it will return the json array
    }
});
...