Имею такой код на HTML странице:
....
ws.onmessage=function(e){
temp = JSON.parse(e.data);};
...
Периодически на страницу поступают json данные. Пример данных: {"r":1,"s":1}, {"r":5,"s":0}, {"temp_air":"25 °C"}, {"humi_air":"50 %"} и т.п. Когда поступает строка вида {"r":5,"s":0} требуется выполнять функцию установки или удаления атрибута объектов на странице, где relay_id это значение ключа r, а status это значение ключа s.
function changeStateRelay(relay_id, status) {
if (status == 1) {
document.querySelector('#relay'+relay_id).setAttribute("checked", "checked");}
if (status == 0) {
document.querySelector('#relay'+relay_id).removeAttribute("checked");}
}
а когда поступает строка вида {"humi_air":"50 %"} требуется подставить значение в определенные поля используя document.getElementById(key).innerText = value; , где key это ключ temp_air или humi_air или другого, а value это значение этих ключей.
Когда данные были только вида {"r":1,"s":1},..,{"r":5,"s":0} я использовал код который замечательно работал:
ws.onmessage=function(e){
temp = JSON.parse(e.data);
changeStateRelay(temp.r, temp.s);
}
function changeStateRelay(relay_id, status) {
if (status == 1) {
document.querySelector('#relay'+relay_id).setAttribute("checked", "checked");}
if (status == 0) {
document.querySelector('#relay'+relay_id).removeAttribute("checked");}
}
для данных вида {"temp_air":"25 °C"},..., {"humi_air":"50 %"} я начал использовать код:
ws.onmessage=function(e){
temp = JSON.parse(e.data, function(key, value){
document.getElementById(key).innerText = value});
}
Как объединить эти два способа в один?
Желательно генерировать данные с указанием типа например
{
"type": "type_first",
"data": {...}
}
После получения обрабатывать их уже в соответствии с указанным типом, например:
if(response.type == 'type_first')
typeFirstHandler(response.data)
else if(response.type == 'type_second')
typeSecondHandler(response.data)
То есть для каждого типа данных пишите обработчик, такой подход избавит вас от проблем когда понадобится расширить функционал обработки ответа.
Также можно не указывать тип и обрабатывать "чистые" данные, например
let temp = JSON.parse(response)
if (typeof temp[0]['r'] != "undefined"){ // если в первом объекте массива есть ключ 'r'
// ....
} else if(typeof temp[0]['temp_air'] != "undefined") { // если в первом объекте массива есть ключ 'temp_air'
// ....
}
Второй способ крайне не желателен т.к вся логика обработки данных в одном месте и когда вам придется расширить функционал или что-то переписать то вы столкнетесь с кучей самых различных проблем.
Также к слову на бэкенде в ответе лучше задать заголовок Content-Type: application/json тогда не придется писать JSON.parse(...), данные сразу придут в виде объекта а не строки.
Сборка персонального компьютера от Artline: умный выбор для современных пользователей