Je suis nouveau sur JS et JSON, et je prends un cours en ce moment. Pour notre projet, nous devons écrire un fichier JSON et l'afficher en utilisant un bouton et JS. Je le regarde depuis des heures et je pensais que j'abandonnerais et chercherais de l'aide.

Voici mon fichier JSON:

{
  "id": "Pavlov's Dog",
  "dateOfExhibition": "2018-07-08T22:00:00.000Z",
  "address": [],
  "street": "Bergmannstrasse 29",
  "city": "Berlin",
  "country": "Deutschland",
  "zip": "10473"
}

Voici mon JS:

(function () {


var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
var request = new XMLHttpRequest();
button.onclick = function () {
request.open('GET', url);
    if (request.status == 200) {

        var json = JSON.parse(request.responseText);
        var data = '<ul>';

        data += '</ul>';

        $('#exhibitions').html(data);

    } else {
        alert('An error has occurred.');
    }
};

})();

Et un extrait de mon HTML:

    </nav>

<!-- JSON TO UNORDERED LIST -->
<button id="button">Click Me</button>
<div id="exhibitions"></div>

    <footer class="footer">

Merci pour toute aide!

1
stefsrieder 6 mars 2016 à 01:01

5 réponses

Meilleure réponse

Vous testez le statut dès que vous avez ouvert la demande. Tu dois:

  1. Envoyer réellement la demande
  2. Attendez une réponse

Vous prenez une chaîne de JSON, la convertissez en objet JavaScript, puis l'ignorez


Il semble que vous tentiez de lier le gestionnaire de clics au bouton avant que le bouton n'existe (et vous utilisez la pratique douteuse de supposer que le bouton générera une variable globale correspondant à son identifiant.


Quelque chose dans le sens de cela devrait fonctionner:

addEventListener("load", set_up_click_handler);

function set_up_click_handler() {
  var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
  var button = document.getElementById("button");
  button.addEventListener("click", click_handler);

  function click_handler(event) {
    var request = new XMLHttpRequest();
    request.open('GET', url);
    request.addEventListener("load", response_handler);
    request.send();
  };

  function response_handler() {
    if (this.status == 200) {
      var json = this.responseText;
      var data = JSON.parse(json);
      var list = $('<ul />');
      for (var item in data) {
        list.append(
          $("<li />").text(item + ": " + data[item])
        );
      }
      $('#exhibitions').append(list);
    } else {
      alert('An error has occurred.');
    }
  }

}
3
Quentin 5 mars 2016 à 22:34

Votre problème est que vous ne prenez pas en compte l'aspect asynchrone de XMLHttpRequest. Ce morceau de code montre que:

request.open('GET', url);
if (request.status == 200) {

De plus, vous avez oublié l'appel à .send() et ajouté les données de réponse dans votre html.

Au lieu de vérifier instantanément le request.status, vous devez attendre que la demande se termine. Cela se fait en ajoutant une fonction à la propriété onload de l'objet XMLHttpRequest (version 2).

request.open('GET', url);
request.onload = function() {
    if (request.status == 200) {
        var json = JSON.parse(request.responseText);
        var data = '<ul>';
        data += /* some parts of the json object */;
        data += '</ul>';
    }
};
request.send();
0
Anders Tornblad 5 mars 2016 à 22:09

Vous pouvez également utiliser jquery pour faire cette demande, qui en tant que débutant peut être plus facile que l'approche javascript vanilla plus verbeuse.

(function () {    
    $("button").on("click", function(){
       $.getJSON('test.json', function(data) {
         var list = $('<ul />');
         for(prop in data){
           list.append($("<li />").text(data[prop]));
          }
          $('#exhibitions').append(list);
          }).fail(function() {
            alert( "failed" );
       })
     })
 })();
0
Paul Fitzgerald 11 mars 2016 à 17:34

Vous ne lancez pas réellement la demande avec un appel à la méthode send.

(une fonction () {

 var url = 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json';
 var request = new XMLHttpRequest();
 button.onclick = function () {
     request.open('GET', url);

     request.send(null);  //  << YOU FORGOT THIS
 }

De plus, vous ne pouvez pas vous lancer directement dans la gestion de la réponse juste après avoir fait la demande. Puisqu'il s'agit d'un appel AJAX, vous ne savez pas quand la réponse reviendra. Vous devez configurer un rappel réussi:

     request.addEventListener("readystatechange", function(){

        if (request.readyState === 4 && request.status == 200) {

            var json = JSON.parse(request.responseText);
            var data = '<ul>';

            data += json + '</ul>';

            $('#exhibitions').html(data);

            } else {
              alert('An error has occurred.');
            }
     });
0
Scott Marcus 5 mars 2016 à 22:13

Où est votre événement Click? Vous request.send() ne faites rien avec votre json var. Vous trouverez ci-dessous des exemples de fonctions get et post XMLHttpRequest, qui peuvent prendre les objets comme premier argument.

var doc = docmuent, bod = doc.body;
function E(id){
  return doc.getElementById(id);
}
function phpize(obj, ignore){
  var r = [];
  for(var i in obj){
    if(obj.hasOwnProperty(i)){
      var p = ignore ? ignore+'['+i+']' : i;
      var v = obj[i];
      var s = typeof v === 'object' ? phpize(v, p) : encodeURIComponent(p)+'='+encodeURIComponent(v);
      r.push(s);
    }
  }
  return r.join('&');
}
function get(send, where, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('GET', where.replace(/(\\|\/)$/,'')+'?'+phpize(send));
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send();
}
function post(send, where, success, context){
  var x = new XMLHttpRequest || new ActiveXObject('Microsoft.XMLHTTP');
  var c = context || this;
  x.open('POST', where); x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
  x.onreadystatechange = function(){
    if(x.readyState === 4 && x.status === 200){
      if(success)success.call(c, eval('('+x.responseText+')'));
    }
  }
  x.send(phpize(send));
}
E('button').onclick = function(){
  get({sendProp1:'send value 1'}, 'http://localhost/Advanced_Web/Final_Project/data/exhibitions.json', function(){
    // do stuff now
  }, this);
});
-1
StackSlave 5 mars 2016 à 22:43