Active 20 mars 2022 / Viewed 54 / Comments 0 / Edit
Exemples de comment obtenir des données json à partir d'une URL en utilisant uniquement javascript:
Mon objectif est de supprimer JQuery de mes sites afin d'augmenter le vitesse sur mobile de ces derniers. Pour cela il est interessant de savoir par exemple comment obtenir des données json à partir d'une URL en utilisant uniquement javascript (AJAX calls). Il y a plusieurs docs disponibles sur le web (voir les références ci-dessous) mais la video youtube de de James Q. Quick (en anglais) explique très bien comment faire cela:
Une première solution consiste à utiliser Fetch API.
Un exemple ici avec des fichier json stockées sur github:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
fetch(url)
.then( res => { return res.json(); } )
.then( data => { console.log(data); } )
.catch( err => { console.errror(error) } )
</script>
</body>
</html>
Une autre approche consiste à utiliser await (Notez que await doit toujours être utilisé dans une fonction asynchrone)
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
LoadData();
</script>
</body>
</html>
Notez que la fonction LoadData renvoie une promesse et peut ensuite être utilisée dans une autre fonction asynchrone :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
( async () => {
const data = await LoadData();
console.log(data);
} )();
</script>
</body>
</html>
Une autre approche avec "then" :
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url);
const data = await res.json();
console.log(data);
}catch(err) {
console.error(err)
}
};
LoadData().then( (data) => console.log(data) );
</script>
</body>
</html>
Notez que l'en-tête (header) peut être spécifié dans l'API de récupération pour créer une requête non mise en cache côté client par exemple (voir fetch(), how do you make a non-cached request?, Fetch PUT request gets Cache-Control header modified on Firefox and not Chrome et Fetch caching response - no-cache headers not working as expected):
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
const LoadData = async () => {
try {
const url = 'https://raw.githubusercontent.com/benjamin-hg-marchant/datasets/main/modis_cloud_phase_time_series_analysis.json'
const res = await fetch(url,{
method: 'GET', // *GET, POST, PUT, DELETE, etc.
mode: 'cors', // no-cors, *cors, same-origin
cache: 'no-cache'});
const data = await res.json();
//console.log(data);
return data;
}catch(err) {
console.error(err)
}
};
LoadData().then( (data) => console.log(data) );
</script>
</body>
</html>
Salut, je suis Ben.
J'ai développé ce site web à partir de zéro avec Django pour partager avec tout le monde mes notes. Si vous avez des idées ou des suggestions pour améliorer le site, faites le moi savoir ! (vous pouvez me contacter via le formulaire de la page d'accueil). Merci!