JavaScript - Array aus Response lesen

[Maxe (Gast)]

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>

[DPA (Gast)]

[/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.

[Maxe (Gast)]

Danke!

Split sieht schon mal vielversprechend aus.

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

[Dirk K. (merciless)]

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

[Maxe (Gast)]

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>

[PittyJ (Gast)]

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...

[Dirk K. (merciless)]

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

[Εrnst B. (ernst)]

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