2D array as return value from ajax

Question

I am not only new here, but also a total beginner in programming. I have programmed a small web application that uses "Ajax" to update data in the front panel. The first version works, but is very cumbersome and also takes a long time.

function updateAll(article){
                document.getElementById("artnr").value = article.options[article.selectedIndex].text;
                document.getElementById("SaveMessage").innerHTML = "";
                
                // 1. Anzahl der Aufträge ermitteln
                $.ajax({
                    type: 'GET',
                    url: 'cntOrder.php',
                    data: $(article),
                    success: function(data){document.getElementById("cntOrder").value = data;}
                });

                // 2. Median aller Uem-Werte
                $.ajax({
                    type: 'GET',
                    url: 'setPoint.php',
                    data: $(article),
                    success: function(data){document.getElementById("setPoint").value = data; calcTarLim(data);}
                }); // Aufruf 4. über "calcTarLim()"
                
                // 3. Aktuelle Grenze auslesen
                $.ajax({
                    type: 'GET',
                    url: 'curLim.php',
                    data: $(article),
                    success: function(data){document.getElementById("curLim").value = data;}
                });

                // 5. Graph aktualisieren (Messwerte, currentLimit und targetLimit)
            }
            
            // 4. Zielwert für Grenze berechnen
            function calcTarLim(data){
                let tol = parseFloat(document.getElementById("tolLim").value);
                let soll = 0;
                if(data == 'change'){
                    window.alert("if: " + data);
                } else {
                    soll = parseFloat(data);
                }
                let ziel = soll * ((100-tol)/100);
                ziel = ziel.toFixed(2);
                document.getElementById("tarLim").value = ziel;
            }

Now my idea was to handle all queries in one Ajax query and put the different return values in an array and then evaluate them using the keys. Unfortunately I don't get any values out.

function updateAll(article){
                document.getElementById("artnr").value = article.options[article.selectedIndex].text;
                document.getElementById("SaveMessage").innerHTML = "";
                
                // 1. Ajax Aufruf, Datenbankfunktionen
                $.ajax({
                    type: 'GET',
                    url: 'ajax.php',
                    data: $(article),
                    success: function(data){
                        window.alert(data);
                        document.getElementById("cntOrder").value = data['cntOrder']['cnt'];
                        document.getElementById("setPoint").value = data['setPoint'];
                        document.getElementById("curLim").value = data['CurLim']['uemmin'];
                        calcTarLim(data['setPoint']);
                    }
                });

Data looks like this:

Array
(
    [cntOrder] => Array
        (
            [cnt] => 6
        )

    [curLim] => Array
        (
            [uemmin] => 16.00
        )

    [setPoint] => 26.28
)

Thanks in advance for any help. If more data is needed, I will of course add it.

Use dataType: "json", in the ajax and return the array as json_encode($array) . stackoverflow.com/questions/7064391/… — angel.bonev
– angel.bonev, Commented Jul 19, 2022 at 9:07
Does this answer your question? PHP returning JSON to JQUERY AJAX CALL — angel.bonev
– angel.bonev, Commented Jul 19, 2022 at 9:07
ok the return value has changed {"cntOrder":{"cnt":"6"},"curLim":{"uemmin":"16.00"},"setPoint":"26.28"} but I still have no access to the individual keys. I will look further how to access it, if it is a json. thanks anyway. — Microscoop
– Microscoop, Commented Jul 19, 2022 at 9:18
Add dataType: "json", into your ajax request and it should work — angel.bonev
– angel.bonev, Commented Jul 19, 2022 at 9:20
At the end of your php, include header("Content-Type: application/json"); echo json_encode($yourArray); — Kokodoko
– Kokodoko, Commented Jul 19, 2022 at 9:44

Tyler2P · Accepted Answer · 2022-07-20 10:00:39Z

-1

OK, now it's running. My solution is as follows:

$.ajax({
  type: 'POST',
  url: 'ajax.php',
  datatype: 'json',
  data: $(article),
  success: function(data) {
    var response = $.parseJSON(data);
    var anzahl = response.cntOrder;
    var sollwert = response.setPoint;
    var grenze = response.curLim;
    document.getElementById("cntOrder").value = anzahl;
    document.getElementById("setPoint").value = sollwert;
    document.getElementById("curLim").value = grenze;
    calcTarLim(sollwert);
  }
});

edited Jul 20, 2022 at 10:00

Tyler2P

2,37030 gold badges26 silver badges34 bronze badges

answered Jul 20, 2022 at 7:15

Microscoop

155 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Quentin Over a year ago

datatype: 'json', — JavaScript is case sensitive. That should be dataType whic would mean var response = $.parseJSON(data); wouldn't be needed. It suggests that the PHP is outputting JSON but claiming it is HTML (i.e. the header() function hasn't been used to set the correct content-type).

Microscoop Over a year ago

but without var response = $.parseJSON(data); it doesnt work. there was no way to get the values of these single elements.

Microscoop Over a year ago

and by the way: dataType doesnt work too.

Collectives™ on Stack Overflow

2D array as return value from ajax

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related