Как открыть 2 JSON файла при обращении к стартовой странице?

@Delphin91170 · Регистрация: 02.04.2019

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

Есть 2 JSON файла. В одном хранится конфигурация (там имя WiFI, пароль и т.п. и еще номер эффекта, который мы выводим на стартовой странице). Во втором JSON файле хранятся эффекты. Их там штук 40. У каждого по 2 настройки. Так вот на стартовой странице надо прочитать config.json и взять с него номер эффекта и effects.json и взять с него настройки для нужного номера эффекта.
Я делал для начала для одного эффекта. Просто выводил на стартовую страницу параметры эффекта.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
var request = new XMLHttpRequest();
var SetupData;
var requestURL = '/e1settings.json';
request.open('GET', requestURL);
request.responseType = 'text';
request.send();
request.onload = function() {
    const SetupDataText = request.response;
    console.log(SetupDataText);
    SetupData = JSON.parse(SetupDataText);
    console.log(SetupData);
    getTableData(SetupData);
}

Далее в функции getTableData я на страницу данные в ползунки.

А вот как мне из второго файла прочитать тут же номер самого эффекта и передать его в функцию getTableData?

krvsa · 25.04.2023, 15:30

Delphin91170, как вариант - оформить чтение данных из файла промисом. Тогда, используя Promise.all(), можно получить данные обоих файлов данные и разом передать их куда нужно.

@Delphin91170 · 25.04.2023, 15:46 **[ТС]**

дело в том, что у меня как раз проблема вызвать данные из JSON как по другому, кроме как я указал в примере. А как указано в примере можно только один файл отработать.
Можете пример привести как это сделать?

krvsa · 25.04.2023, 15:58

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

дело в том, что у меня как раз проблема вызвать данные из JSON как по другому, кроме как я указал в примере

Вот типа такого...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
test('/e1settings.json')
    .then(res => getTableData(res))
    .catch(err => console.log(err))
//
function test(url) {
    return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open('GET', url);
        request.responseType = 'text';
        request.send();
        request.onload = function() {
            const SetupDataText = request.response;
            console.log(SetupDataText);
            SetupData = JSON.parse(SetupDataText);
            console.log(SetupData);
            resolve(SetupData);
        }
        request.onerror  = function() {
            reject(new Error('Ошибка', url))
        }
    })
}

Или промисов совсем нет?

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

Еще вариант вызвать чтение обоих файлов... Сведения из каждого записывать в некий объект или кортеж... Вызывать "итоговую" функцию при получении данных из любого файла... Но итоговое действие выполнять только если есть данные из обоих файлов.

@Delphin91170 · 25.04.2023, 16:23 **[ТС]**

.then не принимается. Выдается ошибка, что не известно, что такое ".".

Добавлено через 13 минут
А где в примере обращение ко второму JSON файлу? Один то я без проблем считываю.

krvsa · 25.04.2023, 18:35

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

А где в примере обращение ко второму JSON файлу?

Его нет в примере... Я наивно полагал что ты поймешь как это делать дальше. Я ведь и потестить не смогу, все данные у тебя...

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

.then не принимается. Выдается ошибка, что не известно, что такое ".".

Это все голословное утверждение... Ты ведь даже не показал своего тестового примера.

@Delphin91170 · 26.04.2023, 12:01 **[ТС]**

Вот моя стартовая страница. Которая работает.

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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="mc.css">
    <title>TestSlider</title>
</head>
 
<body>
<div style="background-color: rgb(9, 43, 240);margin: auto;border-style: ridge;border-width: 8px;border-color: rgb(54, 203, 248);width: 900px;height: 1800px;">
<div style="width: 100%;height: 4%;">
    <nav>
        <ul>
            <li><a>Меню</a>
                <ul>
                    <li><a href="configuration.htm">Конфигурация</a></li>
                    <li><a href="files.htm">Список файлов</a></li>
                    <li><a href="edit.htm">Редактирование файлов</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<hr>
<div style="width: 100%">
<div style="left:20px;width:80%;height:50px">
<input id="range1" type="range" width="100%" min="0" max="100" value="10" style="top:50px">
</div>
<div style="left:20px;width:80%;height:50px">
<a id="brightness" style="font-family:'Courier New', Courier, monospace;font-size:25px;font-weight:bold;left:100px;color:#FFF"></a>
</div>
<hr>
<input id="range2" type="range" width="100%" min="0" max="100">
<a id="speed" style="font-family:'Courier New', Courier, monospace;font-size:25px;font-weight:bold;left:100px;color:#FFF""></a>
<input id="range3" type="range" width="100%" min="0" max="100">
<a id="scale" style="font-family:'Courier New', Courier, monospace;font-size:25px;font-weight:bold;left:100px;color:#FFF""></a>
<hr>
<button class="mine" type="submit" disabled="true" id="SaveSet" onClick="SaveSettings(this)">Сохранить настройки</button>
</div>
</div>
</body>
<script>
const input1 = document.getElementById('range1');
const input2 = document.getElementById('range2');
const input3 = document.getElementById('range3');
const log1 = document.getElementById('brightness');
const log2 = document.getElementById('speed');
const log3 = document.getElementById('scale');
 
input1.addEventListener('input', updateValue1);
input2.addEventListener('input', updateValue2);
input3.addEventListener('input', updateValue3);
 
var request = new XMLHttpRequest();
var SetupData;
var requestURL = '/e1settings.json';
request.open('GET', requestURL);
request.responseType = 'text';
request.send();
request.onload = function() {
    const SetupDataText = request.response;
    console.log(SetupDataText);
    SetupData = JSON.parse(SetupDataText);
    console.log(SetupData);
    getTableData(SetupData);
}
 
function  getTableData(data) {
  document.getElementById('range1').value = data
  document.getElementById('range1').value = data[1]['e'][0];
  log1.textContent = data[1]['e'][0];
  document.getElementById('range2').value = data[1]['e'][1];
  log2.textContent = data[1]['e'][1];
  document.getElementById('range3').value = data[1]['e'][2];
  log3.textContent = data[1]['e'][2];
}
 
function updateValue1(e) {
  log1.textContent = e.target.value;
  document.getElementById('SaveSet').disabled = false;
}
 
function updateValue2(e) {
  log2.textContent = e.target.value;
  document.getElementById('SaveSet').disabled = false;
}
 
function updateValue3(e) {
  log3.textContent = e.target.value;
  document.getElementById('SaveSet').disabled = false;
}
 
async function SaveSettings(submit) {
    const url = server = "/saveSettings?brightness=" + log1.textContent + "&speed=" + log2.textContent + "&scale=" + log3.textContent;
    const result = await send_request1(url);
//    const defaultValue = ''
    location.reload();
//    return result || defaultValue
}
 
async function send_request1(url) {
    const response = await fetch(url);
    if (response.ok) {
        return await response.text();
    } else {
        console.log("Ошибка HTTP: " + response.status);
        return null;
    }
}
 
function val(id){
    var v = document.getElementById(id).value;
    return v;
}
</script>
</html>

Так вот тут в функции getTableData(data) везде прописано обращение к 1 элементу JSON файла. А мне надо из файла config.lson взять номер эффекта и подставить его вместо первой единицы.

krvsa · 26.04.2023, 14:53

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

Так вот тут в функции getTableData(data) везде прописано обращение к 1 элементу JSON файла. А мне надо из файла config.lson взять номер эффекта и подставить его вместо первой единицы.

Если использовать твою стилистику - то getTableData может выглядеть вот так...

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function  getTableData(data) {
    var request = new XMLHttpRequest();
    request.open('GET', '/config.lson');
    request.responseType = 'text';
    request.send();
    request.onload = function() {
    const SetupDataText = request.response;
        console.log(SetupDataText);
        SetupData = JSON.parse(SetupDataText);
        console.log(SetupData);
        // тут как-то из SetupData получить нужный номер
        const i = 1
        document.getElementById('range1').value = data
        document.getElementById('range1').value = data[i]['e'][0];
        log1.textContent = data[i]['e'][0];
        document.getElementById('range2').value = data[i]['e'][1];
        log2.textContent = data[i]['e'][1];
        document.getElementById('range3').value = data[i]['e'][2];
        log3.textContent = data[i]['e'][2];
    }
}

Новые блоги и статьи Все статьи Все блоги /
PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Access VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .	Создание Single Page Application на фреймах krapotkin 16.11.2025 Статья исключительно для начинающих. Подходы оригинальностью не блещут. В век Веб все очень привыкли к дизайну Single-Page-Application . Быстренько разберем подход "на фреймах". Мы делаем одну. . .

krvsa 3800 / 1631 / 428 Регистрация: 14.03.2022 Сообщений: 4,069
	25.04.2023, 15:30
	Delphin91170, как вариант - оформить чтение данных из файла промисом. Тогда, используя `Promise.all()`, можно получить данные обоих файлов данные и разом передать их куда нужно. 0

@Delphin91170 2 / 2 / 1 Регистрация: 02.04.2019 Сообщений: 113
	25.04.2023, 15:46 [ТС]
	дело в том, что у меня как раз проблема вызвать данные из JSON как по другому, кроме как я указал в примере. А как указано в примере можно только один файл отработать. Можете пример привести как это сделать? 0

@Delphin91170 2 / 2 / 1 Регистрация: 02.04.2019 Сообщений: 113
	25.04.2023, 16:23 [ТС]
	.then не принимается. Выдается ошибка, что не известно, что такое ".". Добавлено через 13 минут А где в примере обращение ко второму JSON файлу? Один то я без проблем считываю. 0