Utilisation d'un Json pour injection dans le DOM
Meums
-
jordane45 Messages postés 40050 Statut Modérateur -
jordane45 Messages postés 40050 Statut Modérateur -
Bonjour tout le monde,
Je n'arrive pas à trouver la solution à ma programmation, je viens donc demander votre aide afin de comprendre mes erreurs ou manquements..
L'idée serait de récupérer un fichier JSON par URL pour ensuite réinjecter les données sous forme de tableaux dans le DOM.
J'admets ne même pas avoir d'erreurs pour m’aiguiller dans la console du navigateur..
Voici mon code HTML, CSS et JS (pour que vous aillez la meilleur des visibilités sur le projet)
HTML :
CSS :
JS :
Merci d'avance pour le temps consacré à l'étude de mon cas,
Bien à vous,
Meums alias Pierre.
Je n'arrive pas à trouver la solution à ma programmation, je viens donc demander votre aide afin de comprendre mes erreurs ou manquements..
L'idée serait de récupérer un fichier JSON par URL pour ensuite réinjecter les données sous forme de tableaux dans le DOM.
J'admets ne même pas avoir d'erreurs pour m’aiguiller dans la console du navigateur..
Voici mon code HTML, CSS et JS (pour que vous aillez la meilleur des visibilités sur le projet)
HTML :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Liste des articles TinTin</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Link Bibliothèque-->
<link rel="javascript" href="../js/article-listing.js">
<link rel="stylesheet" href="../css/styles.css">
</head>
<body>
<table class="tbl-article">
<tr class="tbl-colone">
<th>ID</th>
<th>Date</th>
<th>Lang</th>
<th>Catégorie</th>
<th>
<p>Titre Article</p>
<p>Introduction</p>
</th>
</tr>
</table>
<script>
var header = document.querySelector('header');
var tableau = document.querySelector('#tbl-article');
</script>
</body>
</html>
CSS :
table {
border: medium solid #6495ed;
border-collapse: collapse;
width: 70%;
margin: auto;
}
th {
font-family: monospace;
border: thin solid #6495ed;
padding: 5px;
background-color: #D0E3FA;
}
td {
font-family: sans-serif;
border: thin solid #6495ed;
padding: 5px;
text-align: center;
background-color: #ffffff;
}
JS :
// Chargement fichier Json
var JsonData = 'https://ws010.tintin.com/admin/news';
// Instanciation / Ouverture et utilisation de la requette
var request = new XMLHttpRequest();
request.open('GET', JsonData);
request.open.responseType = "json";
request.send();
// Traitement de la réponse et encapsulation dans le gestionnaire d'evenement onload
request.onload = function (){
var Articles = resquest.response;
populateHeader(Articles);
showArticle(Articles);
}
// Fonction d'utilisation du fichier Json
function populateHeader(jsonObj){
// var mytableau = document.createElement('tr');
var article = jsonObj[i];
for( var i = 0; i < x.length; i++){
//mytableau.textContent = jsonObj['id', 'date', 'lang', 'category_name', 'title', 'intro_short']
var mytableau = document.createElement('tr');
var article_ID = document.createElement('td');
var article_Date = document.createElement('td');
var article_Lang = document.createElement('td');
var article_category = document.creatElement('td');
var article_title = document.creatElement('td');
var article_intro = document.creatElement('p');
article_ID.textContent = article[i].id;
article_Date.textContent = article[i].date;
article_Lang.textContent = article[i].lang;
article_category.textContent = article[i].category_name;
article_title.textContent = article[i].title;
article_intro.textContent = article[i].intro_short;
mytableau.appendChild(article_ID);
mytableau.appendChild(article_Date);
mytableau.appendChild(article_Lang);
mytableau.appendChild(article_category);
mytableau.appendChild(article_title);
article_title.appendChild(article_intro)
tableau.appendChild(article);
}
}
Merci d'avance pour le temps consacré à l'étude de mon cas,
Bien à vous,
Meums alias Pierre.
A voir également:
- Utilisation d'un Json pour injection dans le DOM
- Utilisation chromecast - Guide
- Télécharger gratuitement notice d'utilisation - Guide
- Tectro sre 703 injection notice - Forum PDF
- Impossible d'utiliser ce numéro de téléphone pour la validation - Forum Gmail
- Une personne non-voyante utilise un logiciel qui lit les textes et décrit les images. sans utiliser de logiciel spécifique, trouvez, dans le document, comment s’appelle le chien de la photo. - Forum Handicap / Accessibilté
1 réponse
Bonjour,
var header = document.querySelector('header');
var tableau = document.querySelector('#tbl-article');
// Chargement fichier Json
var JsonData = 'https://ws010.tintin.com/admin/news';
const req = new XMLHttpRequest();
console.log('req',req);
req.open('GET', JsonData, false);
req.send(null);
if (req.status === 200) {
populateHeader(req.response);
} else {
console.log("Status de la réponse: %d (%s)", req.status, req.statusText);
}
// Fonction d'utilisation du fichier Json
function populateHeader(jsonObj){
// var mytableau = document.createElement('tr');
console.log(jsonObj);
}
