[AJAX] Lecture données JSON

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:

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">  <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>  <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> </div> <br>  <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:

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:

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

Bonjour,

Quand tu fais

Code:

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:

1 2 showData.append('<p>Chargement OK du fichier JSON</p>');

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 ?

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:

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 ?