Remplacement code php par JavaScript

**regweb** · 23/09/2023, 16h12

Bonjour à tous,
dans une "Div=photo" je souhaiterai afficher les 50 images contenues dans le dossier "album".
Avec un peu de php, ça était vite résolu mais j'aimerai supprimer le php et faire la même chose en JS (jquery). Après avoir cojité un moment ... j'ai trouvé une solution. J'ai renommé toutes les photos en 01.jpg à 49.jpg. Avec le code suivant, j'arrive à afficher mes photos.
(boucle avec numphoto = 0 à 49)

Code javascript :

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

1
2
var url = "albums/" + numphoto + ".jpg";
	$("#photo").html(`<img src='${url}'>`);

Maintenant, je m'interroge s'il ne serait pas possible de faire sans renommer les photos.
Dans le dossier "album", j'ai créé un fichier "liste.txt" qui contient la liste des noms des photos. Là je coince ... comment récupérer cette liste (/tableau/liste.txt) dans un tableau ?
Merci d'avance pour vos lumières.

**ASCIIDEFOND** · 23/09/2023, 21h58

Salut regweb,

Avec la méthode fetch ?

Code JavaScript :

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
    <script>
        async function getFile(url) {
            let tableau
            await fetch(url)
                .then((data) => data.json())
                .then(function (data) {
                    tableau = data;
                })
            return tableau
        }
 
        getFile('albums/liste.json').then(result => {
            for (let image of result) {
                console.log(`<img src='albums/${image.name}.jpg'>`)
            }
        })
    </script>

Format du fichier (liste.json)

Code JSON :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
[
{"name":"file_01"},
{"name":"file_02"},
{"name":"file_03"},
{"name":"file_04"},
{"name":"file_05"},
{"name":"file_06"},
{"name":"file_07"},
{"name":"file_08"},
{"name":"file_09"},
{"name":"file_10"},
{"name":"file_11"},
{"name":"file_12"}
]

**melka one** · 23/09/2023, 22h26

pour récupérer le fichier il faut faire une requête ajax en get sans aucunes configuration de la requête par défaut le fichier sera reconnu en tant que string après cela il faut utiliser l'objet javascript string pour exploiter le fichier mais pour cela il faut savoir comment sont formater les donné du fichier

essai ce code qui utilise XMLHttpRequest() plutôt que fetch.

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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
 
<script>
function teste(){
 
var xhr = new XMLHttpRequest();
xhr.open('GET', '/chemin/texte.txt', true);
 
xhr.onload = function(e) {
 
  if (this.status == 200) {
 
    var txt = document.createTextNode(xhr.response);
        document.body.appendChild(txt);
 
  }
};
 
xhr.send();
}
</script>
</head>
<body>
<button onclick=teste()>teste</button>
</body></html>

sinon l’idée de ASCIIDEFOND d'utiliser un fichier JSON plutôt qu'un fichier texte est intéressante.

**regweb** · 24/09/2023, 11h50

Merci les gars, bon je vais tester les 2 solutions. Le contenu de mon fichier "liste.txt", comme je le génère, j'y mets ce que je veux. Encore merci, à suivre donc.