JavaScript et D3

**bilbe** · 03/06/2018, 17h06

Bonjour tout le monde,

je débute en JS
j'ai une page theme.html et je voudrais afficher dans cette page thematique.json
quand je test sur la navigateur avec l’outil de développement de google chrome , je récupère bien les donnée mais sa ne s'affiche pas sur la page
quelle qu'un pourrais m'aider s'il vous plait

merci

theme.html

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
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="en" >
 
<head>
 <link rel="manifest" href="manifest.json"> 
<meta name="viewport" content="width=device-width, user-scalable=yes" />
  <meta charset="UTF-8">
  <title>Login </title>
   <link rel="manifest" href="manifest.json">
 <script src="https://d3js.org/d3.v4.min.js"></script>   
 
 
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css'>
 
 
      <link rel="stylesheet" href="css/style-Copie.css">
 
 
</head>
 
 
<body onload="myFunction()">
 
<div id="dialog" class="dialog dialog-effect-in">
  <div class="dialog-front">
    <div class="dialog-content">
      <form class="dialog-form" action="" method="POST">
        <fieldset>
          <legend> <img src="BooksGame_logo.jpg" alt="Smiley face"> </legend>
 
 
		  <div class="salle" id="myDiv">
 
		  </div>
			<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
 
  <script>
  
  function myFunction() {
    myVar = setTimeout(showPage, 500);
}
function showPage() {
  //document.getElementById("loader").style.display = "none";
 // document.getElementById("dialog").style.display = "block";
}
  /***************************************************************/
    var section = document.querySelector('.salle');
        
        var requestURL = 'thematique.json';
    
        
        
    var request = new XMLHttpRequest();
    request.open('GET', requestURL);
    request.responseType = 'json';
    request.send();
    request.onload = function() {
      var thematique = request.response;
      showthematique(thematique);
    }
   
    function showthematique(jsonObj) {
                
                  var thematique = jsonObj['salle'];
                  for(var i = 0; i < thematique.length; i++) {
                  
                        console.log(thematique);
                        
                        var myArticle = document.createElement('article');
                        var myPara1 = document.createElement('a');
                        var myList = document.createElement('ul');
                  
                        myPara1.textContent = thematique[i].nom;;
                        
                  
                        myArticle.appendChild(myPara1);
                        myArticle.appendChild(myList);
                        section.appendChild(myArticle);
                  }
    }
    </script>
 
 
 
 
    <script  src="js/index.js"></script>
			<!-- Then Material JavaScript -->
   <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', function() {
                navigator.serviceWorker.register('sw.js').then(function(registration) {
                    // Registration was successful
                    console.log('ServiceWorker registration successful with scope: ', registration.scope);
                }, function(err) {
                    // registration failed :(
                    console.log('ServiceWorker registration failed: ', err);
                });
            });
        }
    </script>
	</body>
 
</html>

thematique.json

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

{"salle":[{"id_salle":"1","nom_salle":"bleu","theme_salle":"Philosophie, religion, sciences, technique et informatique"},{"id_salle":"5","nom_salle":"brune","theme_salle":"langues, littérature étrangères"},{"id_salle":"6","nom_salle":"orange","theme_salle":"langues: latin-grec, littérature française"},{"id_salle":"7","nom_salle":"rose","theme_salle":"art plastique-spéctacle cinéma , musique, photo"},{"id_salle":"8","nom_salle":"rouge","theme_salle":"Ethno,linguistique,psycologie,sociologie"},{"id_salle":"9","nom_salle":"verte","theme_salle":"droit"},{"id_salle":"10","nom_salle":"violette","theme_salle":"economie,géographie,histoire, urbanisme"}]}