Как я могу открыть JSON-файл в JavaScript без jQuery?

17

Я пишу код в JavaScript. В этом коде я хочу прочитать json-файл. Этот файл будет загружен из URL.

Как я могу получить содержимое этого JSON-файла в объекте в JavaScript?

Это, например, файл JSON, расположенный в ../json/main.json :

{"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]}

, и я хочу использовать его в файле table.js следующим образом:

for (var i in mainStore)
{       
    document.write('<tr class="columnHeaders">');
    document.write('<td >'+ mainStore[i]['vehicle'] + '</td>');
    document.write('<td >'+ mainStore[i]['description'] + '</td>');
    document.write('</tr>');
} 
    
задан Rick Weller 23.03.2012 в 12:58
источник
  • Я понимаю, что, «прочитав json-файл», вы имеете в виду сделать запрос к URL-адресу, который возвращает содержимое json. Если да, то можете ли вы объяснить, почему вы не хотите использовать jQuery для этого? Он имеет функцию $ .ajax, которая идеально подходит для этого. –  Michal B. 23.03.2012 в 13:00
  • hey Michal, вот что я хочу сделать «да». Почему я не хочу использовать jQuery, потому что человек, над которым я работаю, не хочет этого, потому что он боится скорости скрипта. Не мой призыв сделать –  Rick Weller 23.03.2012 в 13:04
  • @TobyJustus: Правильное профилирование скажет вам, что jQuery не медленнее относится к getJSON; все, что он делает, делает все возможное для себя, при получении почти ничего. Фактически, Stroustup сделал хороший разговор о том, как собственный код может быть даже медленнее, чем библиотеки, созданные для вас ... –  Tom Wijsman 23.03.2012 в 13:05
  • Убедите его использовать jQuery и $ .getJSON. Это сэкономит вам массу неприятностей и времени! –  Michal B. 23.03.2012 в 13:07

4 ответа

39

Вот пример, который не требует jQuery:

function loadJSON(path, success, error)
{
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function()
    {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                if (success)
                    success(JSON.parse(xhr.responseText));
            } else {
                if (error)
                    error(xhr);
            }
        }
    };
    xhr.open("GET", path, true);
    xhr.send();
}

Назовите его как:

loadJSON('my-file.json',
         function(data) { console.log(data); },
         function(xhr) { console.error(xhr); }
);
    
ответ дан Drew Noakes 16.08.2013 в 18:47
источник
  • Я думаю, что вы забыли «ошибку» в качестве третьего параметра для метода. И спасибо за пример, я буду использовать его. –  Dennis S 10.09.2013 в 08:45
  • @DennisS, спасибо, что указали это. Я исправлю образец кода. –  Drew Noakes 11.09.2013 в 17:37
  • Почему xhr.send () требуется в последней строке? –  ayjay 06.06.2014 в 23:06
  • @ayjay, функция send () фактически отправляет запрос, необязательно с любым контентом для тела (в зависимости от метода HTTP). –  Drew Noakes 07.06.2014 в 01:28
2

JSON имеет ничего для работы с jQuery.

С кодом, который у вас есть, есть nothing .

Чтобы сохранить переменную mainStore , это переменная в этом json.

Вы должны сохранить этот json переменной:

var myJSON = {"mainStore":[{vehicle:'1',description:'nothing to say'},{vehicle:'2',description:'nothing to say'},{vehicle:'3',description:'nothing to say'}]};

var mainStore = myJSON.mainStore;

//.. rest of your code.
    
ответ дан Neal 23.03.2012 в 13:00
источник
  • , но как я могу хранить внешний файл для этого var myJSON? я настоящий новобранец :) –  Rick Weller 23.03.2012 в 13:05
  • @TobyJustus -> falcon80.com/JSON/JSONandAJAX.html –  Neal 23.03.2012 в 13:08
  • @Toby Создайте еще один файл и включите его на свою страницу, используя тег <script> перед другим кодом, который его использует. –  Bojangles 23.03.2012 в 13:08
  • @JamWaffles хе-хе это тоже :-P –  Neal 23.03.2012 в 13:10
  • @TobyJustus: Здесь вы получите хороший пример того, как вы вводите накладные расходы, которых нет в jQuery, поэтому вы получаете более медленное решение. Тонны людей используют jQuery, потому что это быстрая библиотека, почему бы и нет? –  Tom Wijsman 23.03.2012 в 13:14
Показать остальные комментарии
1

XHR можно использовать для открытия файлов, но тогда вы в основном усложняете себя, потому что jQuery делает это намного легче для вас. $.getJSON() делает так легко сделать. Я бы предпочел бы назвать одну строку, чем пытаться заставить весь блок кода работать, но это зависит от вас ...

  

Почему я не хочу использовать jQuery, потому что человек, над которым я работаю, не хочет этого, потому что он боится скорости скрипта.

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

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

    
ответ дан Tom Wijsman 23.03.2012 в 13:04
источник
  • Возможно, он говорит об избежании 100 мс, которые потребуются, чтобы получить копию jQuery cdn, получить json-файл и затем проанализировать его? Я предпочел бы получить json-файл и jquery параллельно. –  Mark Duiker 08.03.2016 в 21:12
  • @MarkDuiker: Ehm no, если бы я дал вам другой веб-сайт, который ссылается на сценарий ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js, он займет всего ~ 3 мс до прочитайте его из своего кеша, когда вы в настоящее время читаете веб-сайт, который ссылается на тот же сценарий, и вы, вероятно, посетили немало других сайтов, ссылающихся на него, а также в прошлые дни. Это часть цели CDN ... ;-) –  Tom Wijsman 08.03.2016 в 23:32
0

Я понимаю, что, «прочитав json-файл», вы имеете в виду сделать запрос к URL-адресу, который возвращает json-контент. Если да, то можете ли вы объяснить, почему вы не хотите использовать jQuery для этой цели? Он имеет функцию $ .ajax, которая идеально подходит для этого и покрывает различия между браузерами.

Если вы хотите прочитать файл, вы должны сделать это на стороне сервера, например. php и предоставить его как-то в dom (существуют разные методы), поэтому js может его использовать. Чтение файла с диска с помощью js невозможно.

    
ответ дан Michal B. 23.03.2012 в 13:05
источник