IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

Lecture données JSON


Sujet :

jQuery

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de kkt8
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    472
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 472
    Par défaut Lecture données JSON
    Bonjour,

    Je poste ça ici, mais c'est entre le html, le javascript et Eclipse donc peut-être qu'il faudra le déplacer !
    J'ai une application basée sur eclipse, dans laquelle j'ai une welcome page en html.
    J'ai fait un slider d'images en html / javascript

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    <section...>
    	<div class="slideshow-container">
    	  <!-- Full-width images with number and caption text -->
    	  <div class="mySlides fade">
    		<div class="numbertext"></div>
    		<img src="img/test.png" style="width:100%">
    		<div class="text">Caption Text</div>
    	  </div>
     
    	  <div class="mySlides fade">
    		<div class="numbertext"></div>
    		<img src="img/test1.png" style="width:100%">
    		<div class="text">Caption Two</div>
    	  </div>
     
    	  <div class="mySlides fade">
    		<div class="numbertext"></div>
    		<img src="img/test2.png" style="width:100%">
    		<div class="text">Caption Three</div>
    	  </div>
     
    	  <!-- Next and previous buttons -->
    	  <a class="prev" onclick="plusSlides(-1)"></a>
    	  <a class="next" onclick="plusSlides(1)"></a>
    	</div>
    	<br>
     
    	<!-- The dots/circles -->
    	<div style="text-align:center">
    	  <span class="dot" onclick="currentSlide(1)"></span>
    	  <span class="dot" onclick="currentSlide(2)"></span>
    	  <span class="dot" onclick="currentSlide(3)"></span>
    	</div>
    </section>		
     
    <script>
            var slideIndex = 1;
            showSlides(slideIndex);
            
            function plusSlides(n) {
              showSlides(slideIndex += n);
            }
            
            function currentSlide(n) {
              showSlides(slideIndex = n);
            }
            
            function showSlides(n) {
              var i;
              var slides = document.getElementsByClassName("mySlides");
              var dots = document.getElementsByClassName("dot");
              if (n > slides.length) {slideIndex = 1}    
              if (n < 1) {slideIndex = slides.length}
              for (i = 0; i < slides.length; i++) {
                  slides[i].style.display = "none";  
              }
              for (i = 0; i < dots.length; i++) {
                  dots[i].className = dots[i].className.replace(" active", "");
              }
              slides[slideIndex-1].style.display = "block";  
              dots[slideIndex-1].className += " active";
            }
    </script>

    Ça marche très bien ! je suis newbie en javascript donc j'ai trouvé ce code sur internet qui s'est avéré très efficace

    Ça se corse, lorsque les images que je veux afficher sont à aller chercher dans un json (le json n'est pas responsable de mon échec, j'ai testé aussi avec du xml)
    J'ai tenté ça:
    dans mon html:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <section...>
    	<a href="#" id="get-data">Get JSON data</a>
       	<div id="show-data"></div>
    	<script src="javascript/jquery-3.2.1.min.js"></script>
    	<script src="example.js"></script>
    </section>
    dans mon example.js:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    $(document).ready(function () {
      $('#get-data').click(function () {
        var showData = $('#show-data');
     
        $.getJSON('test.json', function (data) {
          console.log(data);
     
          var items = data.items.map(function (item) {
          	showData.text(item.value)
            return item.key + ': ' + item.value;
          });
     
          showData.empty();
     
          if (items.length) {
            var content = '<li>' + items.join('</li><li>') + '</li>';
            var list = $('<ul />').html(content);
     
            showData.append(list);
          }
        });
     
        showData.text('Loading the JSON file.');
      });
    });
    Sous Eclipse je n'obtiens rien ... Lorsque je clique sur Get JSON data il s'affiche juste au dessous seulement "Loading the JSON file."
    du coup j'ai cherché un moyen de "debugger" sous chrome et il me parle de soucis de "Cross origin requests".
    J'ai cherché à quoi ça correspondait, et sur les conseils que j'ai trouvé lancé chrome avec l'option --allow-file-access-from-files, mais rien n'y a fait.
    Je ne comprends pas l'erreur, vu que je traite tout en local, mon hmtl comme mon json.
    J'ai essayé aussi de mettre mon json sur un serveur, mais idem.

    Donc j'ai 2 options:
    - quelqu'un sait comment je peux bypasser ce problème
    - je traite le json en java (je suis beaucoup plus à l'aise en java et j'appelle via du javascript cette fonction java
    - est-ce possible ? j'ai testé mais je ne rentre jamais dans la fonction java en question j'appelle cette fonction avec son nom de plugin com.blabla.NomDeClasse.MaFonction mais je ne trouve pas grand chose sur le sujet sur le net d'où le fait que je pense que c'est peut-etre pas le bon chemin à prendre

    Désolée de ce long message, j'ai essayé d'être exhaustive vue que j'ai testé et fait pas mal de recherches !
    Merci de votre attention

    Christ

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Bonjour,

    Quand tu fais
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    showData.text('Loading the JSON file.');
    là tu remplaces tout le texte de showData.

    La fonction jQuery.text() remplace tout le texte d'un élément, il faut utiliser plutôt append :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    showData.append('<p>Chargement OK du fichier JSON</p>');

  3. #3
    Membre éclairé Avatar de kkt8
    Profil pro
    Inscrit en
    Janvier 2005
    Messages
    472
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2005
    Messages : 472
    Par défaut
    Merci pour ta réponse.
    J'ai donc fait le remplacer mais ma page n'affiche que "Chargement OK du fichier JSON", j'en conclus donc que je ne passe pas dans la fonction getjson ?

  4. #4
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 511
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : Maroc

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 511
    Par défaut
    Bonjour,

    Comment fais-tu pour accéder à tes pages html ? t'es sous xampp wamp ?

    Est-ce que la ligne 6 console.log(data) ne s'affiche pas ?

    Pour s'assurer que $.getJSON fonctionne ou pas, utilises les callback comme suite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    $.getJSON( "test.json")
    .done(function( data ) {
       console.log( "JSON Data succès : " , data );//en cas de succès
    })
    .fail(function( jqxhr, textStatus, error ) {
      console.log( "Erreur getJSON: " + textStatus + ", " + error);//cas d'erreur
    });
    Quel console.log apparait dans la console du navigateur ? celui de succès ou bien de l'erreur ?

Discussions similaires

  1. [Echarts 3] Lecture de données json
    Par Julien0134 dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 27/02/2018, 15h48
  2. Lecture d'une donnée JSON en Delphi
    Par BrunetteCP dans le forum Delphi
    Réponses: 3
    Dernier message: 31/07/2017, 16h19
  3. Réponses: 0
    Dernier message: 17/02/2014, 08h17
  4. [SQL-Server] Pb Lecture données PHP / SQL Server
    Par julienduprat dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 07/09/2006, 09h41
  5. Pb de lecture données dans une plage de cellule avec itération
    Par rond24 dans le forum Macros et VBA Excel
    Réponses: 5
    Dernier message: 04/07/2006, 13h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo