JavaScript - Array aus Response lesen

Maxe Gast #6176425
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.

1
<script>

2


3
setInterval(updateRequest,500);

4


5
function updateRequest() {

6


7
  xmlhttp=new XMLHttpRequest();

8
  xmlhttp.onreadystatechange= statusResponse;

9
  xmlhttp.open("GET","status",true);

10
  xmlhttp.send();

11
}

12


13
function statusResponse() {

14
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {

15
  

16
    if (xmlhttp.responseText == "1") {

17
      var img = new Image();

18
      var d=new Date();      

19
      img.src = "elem01.png?v="+d.getTime();;

20
      var tag = document.getElementById("elem1");

21
      tag.src = img.src;

22
      tag.height = img.height;

23
      tag.width = img.width;

24
    } 

25
  }

26
}

27
 

28
</script>
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
DPA Gast #6176482
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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Maxe Gast #6177189
Lesenswert?
• ▲
▼ 
Der Hinweis ist gut, aber erstmal werd ichs so einfach wie möglich 
lassen.

Es funktioniert jetzt, Code siehe unten.

1
<script>

2


3


4
setInterval(updateRequest,500);

5


6
function updateRequest() {

7


8
  xmlhttp=new XMLHttpRequest();

9
  xmlhttp.onreadystatechange= statusResponse;

10
  xmlhttp.open("GET","/status",true);

11
  xmlhttp.send();

12
}

13


14
function statusResponse() {

15
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {

16
  

17
    var responseArr = xmlhttp.responseText.split(' ');

18
    for (var ii = 0; ii <= responseArr.length-1; ii++) {

19
      

20
      if (responseArr[ii] == "1") {

21
        var img = new Image();

22
        var d=new Date();

23
        var fncount = ("00000" + ii.toString()).slice(-5);       

24
        img.src = "element"+fncount+".png?v="+d.getTime();

25
        var tag = document.getElementById("elem"+fncount);

26
        tag.src = img.src;

27
        tag.height = img.height;

28
        tag.width = img.width;

29
      }

30
    } 

31
  }

32
}

33
 

34
</script>
Antwort Zitieren Bearbeiten Löschen Beitrag melden
PittyJ Gast #6177298
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...
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Dirk K. #6177510
Lesenswert?
• ▲
▼ 
Maxe schrieb:
> Der Hinweis ist gut, aber erstmal werd ichs so einfach wie möglich
> lassen.
Haste recht, ist zu aufwändig.
1
<script>

2
setInterval(updateRequest,500);

3


4
function updateRequest() {

5
  xmlhttp=new XMLHttpRequest();

6
  xmlhttp.onreadystatechange= statusResponse;

7
  xmlhttp.open("GET","/status",true);

8
  xmlhttp.send();

9
}

10


11
function statusResponse() {

12
  if (xmlhttp.readyState==4 && xmlhttp.status==200) {

13
    // xmlhttp.responseText = '{ "myFlags":[ 0, 0, 1, 0, 0, 1, 0, 0, 0, 0, 0 ] }'

14
    var response = JSON.parse( xmlhttp.responseText );

15
    for (var ii = 0; ii <= response.myFlags.length-1; ii++) {

16


17
      if (response.myFlags[ii] == "1") {

18
        var img = new Image();

19
        var d=new Date();

20
        var fncount = ("00000" + ii.toString()).slice(-5);

21
        img.src = "element"+fncount+".png?v="+d.getTime();

22
        var tag = document.getElementById("elem"+fncount);

23
        tag.src = img.src;

24
        tag.height = img.height;

25
        tag.width = img.width;

26
      }

27
    }

28
  }

29
}

30
</script>


merciless
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Εrnst B. #6177638
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.

1
let response=await fetch('/status');

2
if (response.ok) {

3
  let data=await response.json();

4
  for (let x of data.xyz) {

5
    ...

6
  }

7
}


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 Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren