Json полученные данные

@PavelSa · Регистрация: 11.09.2018

Студворк — интернет-сервис помощи студентам

Всем привет!

У меня локальный файл json

Он читается функцией:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
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);
}

вызывается эта функция так

JavaScript
1
2
3
 readTextFile("data.json", function(text){
   var data = JSON.parse(text);
});

Вопрос: хочу пользоваться переменной data вне функции readTextFile. Как правильно это сделать?

@amr-now · 18.08.2019, 17:48

Здравствуйте.

Сообщение от PavelSa

Как правильно это сделать?

Сильно зависит от марки и года выпуска браузера.
Для современного MS Edge, Google Chrome и Mozilla Firefox:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        /**
         * TAP-версия загрузки json по HTTP методом GET без возможности отмены.
         * @param {string} url Строка URL.
         * @returns {Promise<Any>} Промис с объектом, полученным из JSON. 
         */
        async function /*Promise<Any>*/ getJSONAsync(url) {
            let response = await fetch(url);
            if (response.ok) {
                let json = await response.json();
                return json;
            }
            else throw new Error(`${response.status}: ${response.statusText}`);
        }
 
        (async function main() {
            let data = await getJSONAsync("data.json");
            console.log(data);
        })();
    </script>
</body>
</html>

Подробное объяснение в онлайн-справочнике:
https://developer.mozilla.org/... sing_Fetch
и онлайн-учебнике:
https://learn.javascript.ru/fetch

Добавлено через 4 минуты
----------
Замечание по функции readTextFile: у неё название не соответствует её содержанию.
Если она скачивает текст, то переделывать mime-тип на "application/json" нельзя.
Если она скачивает json, то ей не нужен callback.

Добавлено через 4 часа 55 минут
PavelSa, если скрипт сделать совместимым с IE11, то в эту функцию getJSON() нужно обернуть Асинхронный паттерн, основанный на событиях

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <script>
        /**
         * EAP-версия загрузки json по HTTP методом GET без возможности отмены
         * на основе объекта XMLHttpRequest.
         * @param {string} url Строка URL.
         * @param {Function} onfulfilled Функция обратного вызова при успешном завершении.
         * @param {Function} onrejected Функция обратного вызова при ошибке.
         */
        function /*void*/ getJSON(url, /*Action<T>*/ onfulfilled, /*Action<T>*/ onrejected) {
            var xhr = new XMLHttpRequest();
            xhr.responseType = "json";
            xhr.open("GET", url);
            xhr.onload = function () {
                if (xhr.status === 200) {
                    onfulfilled(xhr.response);
                }
                else
                    onrejected("Ошибка " + xhr.status + ": " + xhr.statusText);
            };
            xhr.onerror = function () {
                onrejected("Ошибка " + xhr.status + ": " + xhr.statusText);
            };
            xhr.send();
        }
 
        (function main() {
            function onfulfilled(value) { console.log(value); }
            function onrejected(message) { console.log(message); }
 
            getJSON("data.jso", onfulfilled, onrejected);
        })();
    </script>
</body>
</html>

Как мы видим, скрипт получился громоздким и нечитаемым.
В старом паттерне и данные получим непонятно когда, и ошибки нормально не обработаем.

То есть мы можем только произвести по событию действие. Допустим, что-нибудь напишем на странице.
А результат из функции принципиально не сможем вернуть.

@PavelSa · 18.08.2019, 17:54 **[ТС]**

amr-now, Спасибо большое!

Добавлено через 1 минуту
amr-now, проще наверное создать объект в js и выводить данные из него, как считаете? Для задачи: создать повторяющиеся блоки с разной информацией

@amr-now · 18.08.2019, 17:56

PavelSa, совместимость с IE11 и древними телефонами нужна?

@PavelSa · 18.08.2019, 17:57 **[ТС]**

Сообщение от amr-now

совместимость с IE11 и древними телефонами нужна?

нет

@amr-now · 18.08.2019, 18:06

PavelSa, тогда для свежих версий браузеров можно просто функцию getJSONAsync() сохранить в свой js-файл и многократно её использовать с async/await.

Есть относительно компромисный вариант для браузеров 2017 года выпуска:
использовать лапшу из функций-продолжений then() без async/await

JavaScript
1
getJSONAsync().then(onfufilled, onrejected);

Описание в учебнике: https://learn.javascript.ru/promise-chaining

То есть для браузеров разных годов выпуска всё по-разному.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@PavelSa 0 / 0 / 0 Регистрация: 11.09.2018 Сообщений: 45
	18.08.2019, 17:54 [ТС]
	amr-now, Спасибо большое! Добавлено через 1 минуту amr-now, проще наверное создать объект в js и выводить данные из него, как считаете? Для задачи: создать повторяющиеся блоки с разной информацией 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	18.08.2019, 17:56
	PavelSa, совместимость с IE11 и древними телефонами нужна? 0

Json полученные данные

Решение