Utilisation d'un Json pour injection dans le DOM Fermé

Question

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 : Liste des articles TinTin

ID

Date

Lang

Catégorie

Titre Article

Introduction

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.

jordane45 · Answer

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);
       
}

Utilisation d'un Json pour injection dans le DOM

1 réponse

Discussions similaires