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.

**Dave Hiock** · 25/09/2023, 17h11

\�/
j'ai deux interrogations quand m�me

Envoy� par regweb

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).

pourquoi ?

Envoy� par melka one

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

un peu dans le m�me style, quel est l'int�r�t ?

**melka one** · 25/09/2023, 19h16

tu pense trop

**regweb** · 25/09/2023, 22h24

Apr�s essai, la 2eme solution est plus facile a exploiter car elle renvoie un String.
A la question "Pourquoi je cherche � supprimer le php" et bien le site LWS propose un nom de domaine pour 3�50/an plus h�bergement de 2Go mais pas de PHP. Actuellement j'ai la version sup�rieure avec du Php, la version de base me suffirait largement mais faut r�ussir � convertir (comme dans ce cas) le php en Js.
Encore merci.
Reg