Форум программистов, компьютерный форум, киберфорум
JavaScript для начинающих
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/5: Рейтинг темы: голосов - 5, средняя оценка - 5.00
0 / 0 / 0
Регистрация: 11.09.2018
Сообщений: 39
1

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

17.08.2019, 23:14. Показов 1027. Ответов 5
Метки нет (Все метки)

Всем привет!

У меня локальный файл 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. Как правильно это сделать?
0
Лучшие ответы (1)
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
17.08.2019, 23:14
Ответы с готовыми решениями:

JSON.parse() не хочет обрабатывать данные, полученные из php
$.ajax( { type: 'POST', url: "php/reg.php", data: { login: login, password: pass,...

Как записать полученные данные из json в переменную и работать с ними?
Привет! Подскажите как получить данные в переменную. Есть json фаил { "arr": }

Распарсить строку и записать полученные данные в двумерный массив
необходимо разобрать строку в двумерный массив . строка вида ,]

Распарсить json и записать полученные данные в массив
Прочитал статью где такой json { "firstName": "Иван", "lastName": "Иванов", ...

__________________

Записывайтесь на профессиональные курсы Fullstack-разработчиков на JavaScript‌
Обучение в Java Mentor с оплатой после трудоустройства
5
Эксперт JS
5412 / 3125 / 1512
Регистрация: 14.06.2018
Сообщений: 5,896
18.08.2019, 17:48 2
Лучший ответ Сообщение было отмечено PavelSa как решение

Решение

Здравствуйте.
Цитата Сообщение от 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>
Как мы видим, скрипт получился громоздким и нечитаемым.
В старом паттерне и данные получим непонятно когда, и ошибки нормально не обработаем.

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

Добавлено через 1 минуту
amr-now, проще наверное создать объект в js и выводить данные из него, как считаете? Для задачи: создать повторяющиеся блоки с разной информацией
0
Эксперт JS
5412 / 3125 / 1512
Регистрация: 14.06.2018
Сообщений: 5,896
18.08.2019, 17:56 4
PavelSa, совместимость с IE11 и древними телефонами нужна?
0
0 / 0 / 0
Регистрация: 11.09.2018
Сообщений: 39
18.08.2019, 17:57  [ТС] 5
Цитата Сообщение от amr-now Посмотреть сообщение
совместимость с IE11 и древними телефонами нужна?
нет
0
Эксперт JS
5412 / 3125 / 1512
Регистрация: 14.06.2018
Сообщений: 5,896
18.08.2019, 18:06 6
PavelSa, тогда для свежих версий браузеров можно просто функцию getJSONAsync() сохранить в свой js-файл и многократно её использовать с async/await.

Есть относительно компромисный вариант для браузеров 2017 года выпуска:
использовать лапшу из функций-продолжений then() без async/await
Javascript
1
getJSONAsync().then(onfufilled, onrejected);
Описание в учебнике: https://learn.javascript.ru/promise-chaining

То есть для браузеров разных годов выпуска всё по-разному.
1
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
18.08.2019, 18:06

Заказываю контрольные, курсовые, дипломные работы и диссертации здесь.

Как получить полученные json данные из вне функции
Есть файл json.php, который генерирует json данные такого вида: json.php есть файл которые...

Как распарсить данные из первого json-а и перекинуть их в другой json
Добрый день, столкнулся с такой задачей. Есть вот такой json Необходимо извлечь...

Не выводит полученные данные в C++
Получаю вместо вычесленного Sum 0 #include &lt;iostream&gt; #include &lt;math.h&gt; using namespace std; ...

Полученные Winsock данные
Ну в общем ситуация такая: состряпал код для тестов команд. Связь через Winsock по TCp. Все...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
6
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2021, vBulletin Solutions, Inc.