Afficher variables JSON sur HTML- explications :-/

Version imprimable

Bonjour,

Je ne sais pas si je suis au bon endroit...

Je n'arrive pas à afficher le contenu de mon fichier *.json sur ma page Web... pourriez-vous m'aider ?

Code JSON

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
// JSON Document
var id = {
	"name": "Luc",
	"age": 27,
	"sexe": "masculin",
	"prefession": "boucher",
	"hobby": ["tennis", "séries", null],
	"voitures": {
		"voitures1": "BMW",
		"voitures2": "AUDI",
			}
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>JSON</title>
</head>
 
<body>
	<script src="fichier1.json">
		var toJS = JSON.parse(id);
		document.getElementById(prenom).innerHTML= id.name;
 
	</script>
<p>Mon prénom est : 
	</p>
 
</body>
</html>

Merci d'avance :-)

Bonjour,

Code:

1
2
3
4
5
6
7
<p>prénom : <span id="prenom"></span></p>
<p>age : <span id="age"></span></p>
<script src="fichier1.json"></script>
<script>
        document.getElementById('prenom').textContent = id.name;
        document.getElementById('age').textContent = id.age;
</script>

05/08/2019, 13h16
CrasherSEP

Je ne comprends pas bien le code... mais cela fonctionne... donc grand merci :-)

Ps : Je ne comprends pas pourquoi il ne faut pas mettre le script avant...

Encore merci
05/08/2019, 13h44
Invité

Parce que les éléments doivent exister dans le DOM avant de les invoquer dans le script.
05/08/2019, 13h54
CrasherSEP

Ok...

Encore merci :-)

Sinon, on peut/doit utiliser DOMContentLoaded.

Code:

1
2
3
4
5
6
7
8
9
<script src="fichier1.json"></script>
<script>
window.addEventListener("DOMContentLoaded", (event) => {
        document.getElementById('prenom').textContent = id.name;
        document.getElementById('age').textContent = id.age;
});
</script>
<p>prénom : <span id="prenom"></span></p>
<p>age : <span id="age"></span></p>

-> A LIRE / ETUDIER :

Les meilleurs cours et tutoriels pour apprendre le JavaScript