Code javascript utilisant json, jquery et css

**MarilenaF66** · 22/01/2019, 17h57

Bonjour à tous,

J'aimerais faire un site équivalent à celui-ci https://hello-jquery6.glitch.me/ mais en utilisant un générateur aléatoire de chiens (vous moquez pas

). Or j'ai à peu pris repris le même code mais ça ne marche absolument pas. Je suis bloquée car je ne comprends pas où est le problème, voici le code :

1) Code 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
$.getJSON( "https://api.thedogapi.com/v1/images/search?limit=50&page=50&order=Desc", function( json ) { //i take the data     from the dogapi database and callback to the function json
  console.log( json ); // print data in the console
  var dogs = json; //the variable dogs uses the document json 
 
  var body = $( "body" );   // store the "body" of our document inside a jQuery object id body
 
  for( var i = 0; i< json.length; i = i + 1 ) {   // loop through each dogs in our "breeds" array
 
    var dog = dogs[ i ];     // store the current dog in a variable
 
    var imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data
    var img = $( "<img>" );     // we create a jQuery object with an "img" element
 
    img.attr( "src", dogs.url);   // set its "src" attribute with a jquery method
    imgContainer.append( img );     // and append this element to our container
 
    var dogsdata = $( "<p class='dogs-data'></p>" );     // we create a jQuery object with a new paragraph 
 
    dogsdata.html( dogs.breed.name );     // set its inner HTML with jQuery
 
    imgContainer.append( dogsdata );     // and append this to our container
 
    body.append( dogsdata );     // finally we append the container to the "body" of our document
  }
} );

2) Code

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
 <head>
    <meta charset="utf-8">
    <title>Dogs</title>
    <link rel="stylesheet" href="style.css">
  </head>
 
  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>

3) Code CSS

Code css :

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
* {
  margin: 0;
  padding: 0;
}
 
body {
  background: black;
  text-align: center;
  line-height: 0;
}
 
.img-container {
  display: inline-block;
  position: relative;
  overflow: hidden;
  cursor: pointer;
}
 
.dogs-data {
  position: absolute;
  bottom: 0;
  left: -120%;
  width: 100%;
  height: 50px;
  background: rgba( 0, 0, 0, 0.3 );
 
  padding-left: 10px;
  text-align: left;
  color: white;
  font-family: sans-serif;
  font-size: 20px;
  line-height: 24px;
 
  transition: left 0.3s ease-in;
}
 
.img-container:hover .dogs-data {
  left: 0;
}

Pourriez-vous m'aider à comprendre ce qui ne fonctionne pas s'il vous plaît ?

Merci d'avance

**Toufik83** · 22/01/2019, 20h20

Salut,

Dans le fichier css ajoute cette ligne

Code css :

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

1
2
 
.img-container img{width:100px;height:100px}

puis le fichier 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(){
 
	var dogs,body=$( "body" )
	,dog,imgContainer,img
	,dogsdata=$( "<p class='dogs-data'></p>" );
 
	$.getJSON( "https://api.thedogapi.com/v1/images/search?limit=50&page=50&order=Desc", function( json ) {
	    console.log( json ); // print data in the console
	    dogs = json; //the variable dogs uses the document json 
 
	    for( var i = 0; i< json.length; i = i + 1 ) {   // loop through each dogs in our "breeds" array
 
		dog = dogs[ i ];     // store the current dog in a variable
		imgContainer = $( "<div class='img-container'></div>" ); // we create a container for the dog image and its data
		img = $( "<img>" );     // we create a jQuery object with an "img" element
		img.attr( "src", dog.url);   // set its "src" attribute with a jquery method
		imgContainer.append( img );     // and append this element to our container
		dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );     // set its inner HTML with jQuery
		imgContainer.append( dogsdata );     // and append this to our container
		body.append( imgContainer );     // finally we append the container to the "body" of our document
	    }
      });
 
});

**MarilenaF66** · 22/01/2019, 20h38

Salut,

Merci beaucoup de ta réponse en effet cela fonctionne comme je voulais ! Est-ce que tu pourrais m'expliquer ce qu'il manquait et la signification de ces lignes s'il te plaît ? :

1)

Code :

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

$(document).ready(function(){

2)

Code :

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

1
2
3
var dogs,body=$( "body" )
	,dog,imgContainer,img
	,dogsdata=$( "<p class='dogs-data'></p>" );

--> ici je ne comprends pas la signification des virgules au début ?
--> Pourquoi cette ligne était-elle à rajouter ?

3) Pourquoi enlever systématiquement var ??

4) Pourquoi avoir remplacé

Code :

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

    dogsdata.html( dogs.breed.name );     // set its inner HTML with jQuery

par

Code :

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

		dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );     // set its inner HTML with jQuery

--> à quoi sert ?

Merci d'avance pour tes réponses

**Toufik83** · 22/01/2019, 20h57

1- Cette fonction est exécutée quand le document est prêt (chargé)

Code :

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

1
2
3
4
 
$(document).ready(function(){
    /*normalement tout le code js doit être ici*/
});

2 et 3 La déclaration des variables peut se faire avec deux manières, soit var a="valeur";var b="valeur" ou en séparant les noms des variables avec une virgule (,) sans répéter le mot "var"

Code :

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

1
2
3
4
5
6
 
var dogs,body=$( "body" )
  ,dog,imgContainer,img
  ,dogsdata=$( "<p class='dogs-data'></p>" );
// ou
var dogs; var body; var dog; var ...

4-Si tu vérifies les items de ton objet json, il n y a pas de variable breed, il y a plutôt breeds (avec s à la fin), et ce n'est pas tout car cette variable elle peut être un tableau vide [], donc il faut d'abord vérifier qu'elle contient au moins un item.

La ligne :

Code :

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

1
2
 
dogsdata.html( dog.breeds[0]?dog.breeds[0].name:"" );

est équivalente à

Code :

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

1
2
3
4
5
6
 
if(dog.breeds[0]!=undefined){
    dogsdata.html(dog.breeds[0].name);
}else{
    dogsdata.html('');
}

ça s'appelle les opérateurs conditionnels ou ternaires.

**MarilenaF66** · 22/01/2019, 21h41

Je te remercie de ta réponse très claire et très bien expliquée !

Encore merci de ton aide et bonne soirée

**Toufik83** · 22/01/2019, 21h44

de rien, si ton souci est résolu n'oublie pas d'appuyer sur le bouton

en bas de la page.

Code javascript utilisant json, jquery et css

jQuery

Vue hybride

Discussions similaires

Partager

Partager