JavaScript liest letzten Array Eintrag aus JSON

[beatles]

Hallo Zusammen

Ich habe folgende Situation:
- Index.html mit integriertem Javascript

Mit dem JavaScript mache ich einen XMLHttpRequest und lese ein JSON file auf dem Server aus.
Das JSON file enhält verschiedene Arrays.

{
"daten":[
{ "location": "Zurich", "date": "12.02.1993", "map": "img/zurich.jpg"},
{ "location": "Zurich2", "date": "12.02.1963", "map": "img/zurich.jpg"}
],
"daten2":[
{ "location": "Genf", "date": "12.02.1983", "map": "img/genf.jpg"}
]
}

Ziel ist es immer nur den letzten Eintrag aus dem Array auszulesen.
Ich muss wohl nach dem JSON.parse mittels "Iteration" durch das Array gehen bis zum letzten Eintrag??

JavaScript:

<script type = "application/javascript">

var xhr = new XMLHttpRequest();                 // XMLHttpRequest Objekt
xhr.open("GET", "http://xxxx/jsontest/data.json", true);

xhr.onload = function() {                      
  if(xhr.status === 200) {                      // Server Status 200 ok
    responseObject = JSON.parse(xhr.responseText);

    // BUILD UP STRING WITH NEW CONTENT
    //daten = Name des Arrays
    var newContent = '';
    for (var i = 0; i < responseObject.daten.length; i++) { // Loop durch das Objekt
      newContent += '<div class="block1">';
      newContent += '<img src="' + responseObject.daten[i].map + '" ';
      newContent += 'alt="' + responseObject.daten[i].location + '" />';
      newContent += '<p><b>' + responseObject.daten[i].location + '</b><br>';
      newContent += responseObject.daten[i].date + '</p>';
      newContent += '</div>';
    }

 var newContent2 = '';
xxxx
xxx
    // Update der Seite
    document.getElementById('content').innerHTML = newContent;
     document.getElementById('content2').innerHTML = newContent2;
  }
};

xhr.open('GET', 'data.json', true);        // Request vorbereiten
xhr.send(null);                            // Request senden
</script>

Besten Dank für die Unterstützung

 

[VALBITZ57]

Wenn du jeweils den letzten Eintrag in daten und daten2 haben willst, kannst du ganz normal auf die Arrays zugreifen:

var response = {
"daten":[
{ "location": "Zurich", "date": "12.02.1993", "map": "img/zurich.jpg"},
{ "location": "Zurich2", "date": "12.02.1963", "map": "img/zurich.jpg"}
],
"daten2":[
{ "location": "Genf", "date": "12.02.1983", "map": "img/genf.jpg"}
]
};

//Zugriff
console.log(response.daten[response.daten.length-1]);
console.log(response.daten2[response.daten2.length-1]);

 

[beatles]

Danke VALBITZ57 aber gibt es auch eine Möglichkeit direkt nach dem JSON.parse nur die letzte Position der Arrays zu benutzen und den/die DOM mittels dieser Info zu manipulieren (getElementbyID)?

 

[VALBITZ57]

Was genau wäre in deinem Beispiel die letzte Position der Arrays?
Meinst du daten2 oder map in den jeweiligen Arrays

 

[beatles]

Zum Beispiel aus dem Array "daten" wäre der letzte Eintrag also Index 1 (Array beginnt ja bei 0)
"location": "Zurich2", "date": "12.02.1963", "map": "img/zurich.jpg"

Das müsste dann für die DOM Manipulation verwendet werden..

 

[VALBITZ57]

Wie ich bereits beschreiben habe, kannst du auf den letzten Index mit

responseObject.daten[responseObject.daten.length-1]

zugreifen. Mit .location greifst du dann auf "Zurich2" zu.
Das DOM kannst du anschließend (wie in bereits deinem Code vorhanden) manipulieren.

 

[beatles]

Ok, danke...
Habe noch ein wenig Mühe das korrekt zu implementieren:

 var newContent = '';
      for (var i = 0; i < responseObject.daten[responseObject.daten.length; -1]) {
      newContent += '<div class="block1">';
      newContent += '<img src="' + responseObject.daten[i].map + '" ';
      newContent += 'alt="' + responseObject.daten[i].location + '" />';
      newContent += '<p><b>' + responseObject.daten[i].location + '</b><br>';
      newContent += responseObject.daten[i].date + '</p>';
      newContent += '</div>';
    }

 

[VALBITZ57]

Wenn du nur die Daten hinzufügen willst, brauchst du keine Schleife mehr (da wir ja direkt das Objekt ansprechen):

var meinObjekt = response.daten[response.daten.length-1];
var newContent = '';
newContent += '<div class="block1">';
newContent += '<img src="' + meinObjekt.map + '" ';
newContent += 'alt="' + meinObjekt.location + '" />';
newContent += '<p><b>' + meinObjekt.location + '</b><br>';
newContent += meinObjekt.date + '</p>';
newContent += '</div>';

 

[Deine Mudda]

Wenn ich das richtig verstehe, suchst Du auch noch eine for-in Schleife:
Dein JSON-Objekt enthält mehrere Arrays, von denen Du jeweils das letzte Element verwenden willst?

Dann geht das in etwa so:

for(var el in responseObject) {

   if(!responseObj.hasOwnProperty(el)) continue;

   var liste = responseObject[el];

   var letztesElement = liste.pop();  
   machWasMitLetztesElement(letztesElement);

}

 

[beatles]

kriegs leider nicht gebacken... muss ich für response noch eine Variable definieren? Das gibt zumindest die Konsole aus...

 

[VALBITZ57]

Es stellt sich die Frage, ob du im Vorhinein weißt wie viele Arrays das JSON-Objekt enthält. Wenn das nicht der Fall ist, brauchst du wie @Deine Mudda angemerkt hat eine Schleife. In dieser Schleife musst du dann den HTML-Code erstellen und dynamisch (z.B. createElement) deiner Seite hinzufügen (der Ansatz mit getElementByID macht ja nur Sinn, wenn du vorher schon eine fixe Anzahl an Elementen erstellt hast, wo dann der newContent reinkommt).

 

[beatles]

Habs nun hingekriegt mit Index:

 var newContent = '';
            var checkIndex;
            for (var i = 0; i < responseObject.box1.length; i++) {
            checkIndex= i;
            }