mikrocontroller.net

Forum: PC-Programmierung JavaScript - Array aus Response lesen


Announcement: there is an English version of this forum on EmbDev.net. Posts you create there will be displayed on Mikrocontroller.net and EmbDev.net.
von Maxe (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Hallo allerseits,

ich möchte mittels JavaScript ein Array vom Server abfragen und 
entsprechend dem Array-Inhalt Aktionen auslösen.

Die Response würde also das Array (mit Boolschen Werten) beinhalten, 
Anzahl der Elemente kann als fest betrachtet werden. Ob die Werte 
hintereinander oder Zeilenweise angeordnet sind, wäre egal.
Die Antwort würde also bspw. so aussehen:
0 0 1 0 0 1 0 0 0 0 0

Wie bekomme ich diese Werte nun in ein Array, um sie danach gut 
weiterverarbeiten (durchiterieren) zu können?

Bin leider absoluter Anfänger in dem Gebiet.

Die Abfrage läuft über ein XMLHttpRequest.
Bisher hab ich folgenden Code, was auch für ein Element funktioniert, 
das brauche ich nun für eine ganze Liste an Bildern.
<script>

setInterval(updateRequest,500);

function updateRequest() {

  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange= statusResponse;
  xmlhttp.open("GET","status",true);
  xmlhttp.send();
}

function statusResponse() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  
    if (xmlhttp.responseText == "1") {
      var img = new Image();
      var d=new Date();      
      img.src = "elem01.png?v="+d.getTime();;
      var tag = document.getElementById("elem1");
      tag.src = img.src;
      tag.height = img.height;
      tag.width = img.width;
    } 
  }
}
 
</script>

von DPA (Gast)


Bewertung
0 lesenswert
nicht lesenswert
[/c]
let my_array = xmlhttp.responseText.split(' ').map(x=>x=='1');
if(my_array[0]) ...something something... ;
if(my_array[1]) ...something something... ;
[/c]

Übrigens, mittlerweile ist ES6 und "fetch" so ziemlich überall 
unterstützt, der Aufwand mit XMLHttpRequest lohnt sich nicht mehr.

von Maxe (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Danke!

Split sieht schon mal vielversprechend aus.

Nach ES6 und "fetch" such ich auch. Danke.

von Dirk K. (merciless)


Bewertung
0 lesenswert
nicht lesenswert
Tue dir einen Gefallen und verpacke die Daten in JSON:
https://www.w3schools.com/js/js_json_parse.asp
Kann man leicht in ein Objekt parsen und späteres Erweitern
fällt leicht. Außerdem ist der Datenstrom leichter lesbar
für Debug-Zwecke.

merciless

: Bearbeitet durch User
von Maxe (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Der Hinweis ist gut, aber erstmal werd ichs so einfach wie möglich 
lassen.

Es funktioniert jetzt, Code siehe unten.
<script>


setInterval(updateRequest,500);

function updateRequest() {

  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange= statusResponse;
  xmlhttp.open("GET","/status",true);
  xmlhttp.send();
}

function statusResponse() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  
    var responseArr = xmlhttp.responseText.split(' ');
    for (var ii = 0; ii <= responseArr.length-1; ii++) {
      
      if (responseArr[ii] == "1") {
        var img = new Image();
        var d=new Date();
        var fncount = ("00000" + ii.toString()).slice(-5);       
        img.src = "element"+fncount+".png?v="+d.getTime();
        var tag = document.getElementById("elem"+fncount);
        tag.src = img.src;
        tag.height = img.height;
        tag.width = img.width;
      }
    } 
  }
}
 
</script>

von PittyJ (Gast)


Bewertung
0 lesenswert
nicht lesenswert
Das Verpacken in JSON haben wir hier auch gemacht. Das hat eigentlich 
nur Vorteile gebracht. Schnell mal einen Parameter dazu oder weg ist ein 
Kinderspiel, weil alles einen Namen bekommt.
Alles wird viel übersichtlicher.

Vielleicht in einer stillen Stunde damit rumspielen...

von Dirk K. (merciless)


Bewertung
0 lesenswert
nicht lesenswert
Maxe schrieb:
> Der Hinweis ist gut, aber erstmal werd ichs so einfach wie möglich
> lassen.
Haste recht, ist zu aufwändig.
<script>
setInterval(updateRequest,500);

function updateRequest() {
  xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange= statusResponse;
  xmlhttp.open("GET","/status",true);
  xmlhttp.send();
}

function statusResponse() {
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {
    // xmlhttp.responseText = '{ "myFlags":[ 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0 ] }'
    var response = JSON.parse( xmlhttp.responseText );
    for (var ii = 0; ii <= response.myFlags.length-1; ii++) {

      if (response.myFlags[ii] == "1") {
        var img = new Image();
        var d=new Date();
        var fncount = ("00000" + ii.toString()).slice(-5);
        img.src = "element"+fncount+".png?v="+d.getTime();
        var tag = document.getElementById("elem"+fncount);
        tag.src = img.src;
        tag.height = img.height;
        tag.width = img.width;
      }
    }
  }
}
</script>

merciless

von Εrnst B. (ernst)


Bewertung
0 lesenswert
nicht lesenswert
Dirk K. schrieb:
> Maxe schrieb:
>> Der Hinweis ist gut, aber erstmal werd ichs so einfach wie möglich
>> lassen.
> Haste recht, ist zu aufwändig.

Noch weniger Aufwand wär's damit:

DPA schrieb:
> Übrigens, mittlerweile ist ES6 und "fetch" so ziemlich überall
> unterstützt, der Aufwand mit XMLHttpRequest lohnt sich nicht mehr.
let response=await fetch('/status');
if (response.ok) {
  let data=await response.json();
  for (let x of data.xyz) {
    ...
  }
}

Geht so fast überall, nur der alte Internet Explorer ist mal wieder die 
Ausnahme.

https://caniuse.com/#feat=async-functions
https://caniuse.com/#feat=fetch

Antwort schreiben

Die Angabe einer E-Mail-Adresse ist freiwillig. Wenn Sie automatisch per E-Mail über Antworten auf Ihren Beitrag informiert werden möchten, melden Sie sich bitte an.

Wichtige Regeln - erst lesen, dann posten!

  • Groß- und Kleinschreibung verwenden
  • Längeren Sourcecode nicht im Text einfügen, sondern als Dateianhang

Formatierung (mehr Informationen...)

  • [c]C-Code[/c]
  • [avrasm]AVR-Assembler-Code[/avrasm]
  • [code]Code in anderen Sprachen, ASCII-Zeichnungen[/code]
  • [math]Formel in LaTeX-Syntax[/math]
  • [[Titel]] - Link zu Artikel
  • Verweis auf anderen Beitrag einfügen: Rechtsklick auf Beitragstitel,
    "Adresse kopieren", und in den Text einfügen




Bild automatisch verkleinern, falls nötig
Bitte das JPG-Format nur für Fotos und Scans verwenden!
Zeichnungen und Screenshots im PNG- oder
GIF-Format hochladen. Siehe Bildformate.

Mit dem Abschicken bestätigst du, die Nutzungsbedingungen anzuerkennen.