json_encode uzyskanie dostępu do konkretnych danych

Question

Witajcie, nie bardzo wiem, jak dostać się do konkretnych danych w json encode ale po kolei mam

$result = $con->query("SELECT `napiecie`, `ampery`, `temp`, `Wh`, `data` FROM `dom_czasowy` GROUP BY data ORDER BY data LIMIT 40;");
$resultArray = $result->fetch_all(MYSQLI_ASSOC);
echo json_encode($resultArray);

to pobieram

function repeatMe() {
                            var xml = new XMLHttpRequest();
                            xml.open("POST", "testowy.php", true);
                            xml.onreadystatechange = function() {
                                if (xml.readyState == 4 && (xml.status >= 200 && xml.status < 300 || xml.status == 304 || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined")) {
                                    if (xml.responseText) {
                                        var change = JSON.parse(xml.responseText);
                                        //console.log(change);
                                        
                                        chart.updateSeries([{
                                            data: change
                                        }])
                                    }
                                    xml = null;
                                }
                            };
                            xml.send();
                        }

i teraz pytanie czy da się dostać do konkretnych danych tzn

pobrane dane w

var change = JSON.parse(xml.responseText);

dają w konsoli

Array(26) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
​
0: Object { napiecie: "232.30", ampery: "0.03", temp: "10", … }
​​
Wh: "0.40"
​​
ampery: "0.03"
​​
data: "2023-08-25 23:07:06"
​​
napiecie: "232.30"
​​
temp: "10"
​​
<prototype>: Object { … }
​
1: Object { napiecie: "232.50", ampery: "0.03", temp: "22", … }
​
2: Object { napiecie: "232.40", ampery: "0.03", temp: "21", … }
​
3: Object { napiecie: "232.30", ampery: "0.03", temp: "20", … }
​
4: Object { napiecie: "232.10", ampery: "0.03", temp: "16", … }
​
5: Object { napiecie: "232.20", ampery: "0.03", temp: "18", … }
​
6: Object { napiecie: "232.20", ampery: "0.03", temp: "17", … }
​
7: Object { napiecie: "232.20", ampery: "0.03", temp: "15", … }
​
8: Object { napiecie: "232.20", ampery: "0.03", temp: "19", … }
​
9: Object { napiecie: "233.10", ampery: "0.03", temp: "24", … }
​
10: Object { napiecie: "233.60", ampery: "0.03", temp: "12", … }
​
11: Object { napiecie: "233.60", ampery: "0.04", temp: "21", … }
​
12: Object { napiecie: "233.70", ampery: "0.04", temp: "22", … }
​
13: Object { napiecie: "233.40", ampery: "0.04", temp: "26", … }
​
14: Object { napiecie: "232.60", ampery: "0.03", temp: "27", … }
​
15: Object { napiecie: "233.20", ampery: "0.03", temp: "28", … }
​
16: Object { napiecie: "233.30", ampery: "0.03", temp: "27", … }
​
17: Object { napiecie: "233.10", ampery: "0.03", temp: "25", … }
​
18: Object { napiecie: "234.00", ampery: "0.04", temp: "24", … }
​
19: Object { napiecie: "234.30", ampery: "0.03", temp: "26", … }
​
20: Object { napiecie: "234.00", ampery: "0.03", temp: "23", … }
​
21: Object { napiecie: "234.10", ampery: "0.04", temp: "24", … }
​
22: Object { napiecie: "234.10", ampery: "0.03", temp: "22", … }
​
23: Object { napiecie: "233.80", ampery: "0.03", temp: "21", … }
​
24: Object { napiecie: "233.90", ampery: "0.03", temp: "23", … }
​
25: Object { napiecie: "260", ampery: "22", temp: "30", … }
​
length: 26
​
<prototype>: Array []
dom.php:551:49

i muszę podbrać dane do kilku różnych wykresów i chciałam to zrobić w jednym zapytaniu i teraz jak zrobić żeby np przekazać dane Wh kombinowałam tak chanage['Wh'] ale to nic nie daje na necie też nie znalazłam nic co by mnie nakierowało jak się do tego dobrać. Jakieś pomysły?

 

Answer 1

OK, czyli co chcesz zrobić - zamienić tablicę obiektów na tablicę z jednym konkretnym jego polem?

Jeśli tak, to na oko coś takiego; pewnie też potrzebujesz parseFloat żeby zamienić stringi z powrotem na liczby - choć to brzmi jak błąd po stronie PHP, że zamienia te liczby na stringi przy zwracaniu JSONa.

var change = [ {Wh: "0.40"}, {Wh: "0.45"}, {Wh: "0.50"} ];
console.log(change.map(o => o.Wh));
// ['0.40', '0.45', '0.50']
change.map(o => parseFloat(o.Wh))
// [0.4, 0.45, 0.5]

Swoją drogą, zamiast onreadystatechange i readyState użyj zwykłego eventu onload lub w ogóle fetch()a, onreadystatechange to kod sprzed 12+ lat temu... (a z tym Safari to tym bardziej nie wiem o co chodzi)

Comments

Dzięki za zainteresowanie, taki kod ( onreadystatechange i readyState ) znalazłam na necie. Problem, który próbuje rozwiązać to pobierać dane z bazy danych PHP MySqli w interwałach czasowych i przasłanie ich do apexchard, żeby były wykresy automatycznie aktualizowane o dane z czujników i teraz udało mi sie wykombinować pobranie danych przez jqery z bazy co 1sek to jest podane w json_encode i pobrane

function repeatMe() {
                            var xml = new XMLHttpRequest();                           
                            xml.open("POST", "testowy.php", true);
                            xml.onreadystatechange = function() {
                                if (xml.readyState == 4 && (xml.status >= 200 && xml.status < 300 || xml.status == 304 || navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined")) {
                                    if (xml.responseText) {
                                        var change = jQuery.parseJSON(xml.responseText);
                                        //console.log(change);
                                        
                                        chart.updateSeries([{
                                            data: WhH
                                        }])

                                    }
                                    xml = null;
                                }
                            };
                            xml.send();
                        }

                        setInterval(repeatMe, 5000);

i teraz pobrane dane chce przekazać do

 chart.updateSeries([{
                                            data: change
                                        }])

która mi będzie zmieniać wykresy, jestem początkująca i uczę się tego na podstawie przykładów, jakie znajduje na necie będę wdzięczna za podpowiedz, jak to poprawnie zrobić ew jak powinno się to robić, bo z racji braku wiedzy zdaje sobie sprawę, że czasami próbuję odkryć koło na nowo albo walę głową w mur nawet nie wiedząc o tym, bo brak wiedzy powoduje, że wykładam się w miejscach oczywistych dla osób obeznanych.

---

OK, ale uhhh... nie zadałaś żadnego pytania i wrzuciłaś ten sam kod co na początku, więc nie wiem o co chodzi :/

Wyżej pokazałem jak z listy obiektów zrobić tablicę liczb. Czy tablicę liczb to jest to co musisz przekazać do updateSeries? Jak tak, to tyle, nie?

(BTW przy okazji sprawdziłem to

navigator.userAgent.indexOf("Safari") >= 0 && typeof r.status == "undefined"))

I wygląda że... to jest niepotrzebne i nieaktualne od 15 lat. Nie wiem skąd ten kod wzięłaś :/ Nie żeby nie działał, ale no... trzeba się starać żeby na coś tak starego trafić.)

---

ok to pierwsze pytanie:

- dostaje z

var change = JSON.parse(xml.responseText);
console.log(change);

0: Object { napiecie: "232.30", ampery: "0.03", temp: "10", … }
​​
Wh: "0.40"
​​
ampery: "0.03"
​​
data: "2023-08-25 23:07:06"
​​
napiecie: "232.30"
​​
temp: "10"
​​
<prototype>: Object { … }

jak uzyskane dane przekazać do

chart.updateSeries([{
                   data:   <--------------
                  }])

gdzie mam ich kilka dokładnie 4 do wykresów i nie wiem, jak powinno się to zrobić to co podałeś

var change = [ {Wh: "0.40"}, {Wh: "0.45"}, {Wh: "0.50"} ];
console.log(change.map(o => o.Wh));
// ['0.40', '0.45', '0.50']
change.map(o => parseFloat(o.Wh))
// [0.4, 0.45, 0.5]

jak to przekazać do

chart.updateSeries([{
                   data: change.map(o => parseFloat(o.Wh))  ????
                  }])

 

---

Uhh być może? Jeśli updateSeries ma brać argument typu

chart.updateSeries([{
    data: [1.5, 5.6, 7.8]
}])

To na oko tak. Jak już to miałaś napisane to zakładam że już spróbowałaś? :D

---

Tak i przekazuje, ale mam kolejne pytanie, skoro wspominałeś, że forma zapytania jest archaiczna  (onreadystatechange i readyState ), jaką obecnie się stosuje do tego zapytania, które w moim przypadku jest zastosowane do pobierania, albo jakie powinno być zastosowane jako optymalne?

I teraz się jeszcze zastanawiam, jak zrobić, żeby podczas jednego interwału np 2 sek pobiera z jednego zapytania, jak obecnie mam i mogłabym wstawić otrzymane dane do wszystkich chart.updateSeries, bo obecnie rozumiem, że wstawione wewnątrz

var widgetChart1 = function() {}

Będzie wykonywane tylko dla tej funkcji, a jak dane uzyskane zrobić bardziej globalne wyjście poza funkcję nic mi nie dało. Cały czas mówię o tym zapytaniu, które mam

function repeatMe() {
                            var xml = new XMLHttpRequest();
                            xml.open("POST", "testowy.php", true);
                            xml.onreadystatechange = function() {
                                if (xml.readyState == 4) {
                                    if (xml.responseText) {
                                        var change = jQuery.parseJSON(xml.responseText);
                                        console.log(change);
                                        chart.updateOptions({
                                            xaxis: {
                                                categories: change.map(o => parseFloat(o.data)),
                                            },
                                            series: [{
                                                data: change.map(o => parseFloat(o.Wh)),
                                            }],
                                        });
                                    }
                                    xml = null;
                                }
                            };
                            xml.send();
                        }
                        setInterval(repeatMe, 2000);

i jak to skonstruować, żeby w interwale pobierało dane (change.map(o => parseFloat(o.data)),)  i umożliwiało podstawienie ich do wszystkich

chart.updateSeries

lub inny rodzaj zapytania, który by umożliwiał rozwiązanie mojego problemu,

ew tak się nie da i dla każdego wykresu robić osobno

---

Ja się kompletnie nie znam, ale podoba mi się ta strona i ta strona.

Edit. No i oczywiście MDN.