Utilisation d'un Json pour injection dans le DOM

Fermé

Meums - Modifié le 28 sept. 2018 à 12:12
jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 - 28 sept. 2018 à 12:27

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 :

<!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
Notice d'utilisation - Guide
Votre compte a été désactivé pour violation de nos conditions d’utilisation - Guide
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é
Dossier en cours d'utilisation - Forum Windows 8 / 8.1

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38472 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 5 mai 2025 4 744
28 sept. 2018 à 12:27

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

Discussions similaires

Avis site Crush dom tom / crushdomtom.com

Bonjour,
Quelqu un connait il ce site crush dom tom
Pour savoir si fiable

Configuration: Android / Chrome 91.0.4472.120

Impossible d'utiliser ce numéro de téléphone pour la validat

Bonjour, Je viens de créer une nouvelle adresse gmail qui me demandait mon numéro de téléphone. Jusqu'ici pas de problème. Ensuite mon compte a été bloqué et on m'a demandé de valider mon identité. Pour cela j'ai dû rentrer mon numéro de téléphone et là apparaît le message "Impossible d'utiliser ce numéro de téléphone pour la validation". Quelqu'un saurait-il m'aider, je suis complètement bloquée ? Merci

L'imprimante et en cours d'utilisation ou une

Bonjour,
Bonjour je possède une imprimante scanner canon mg5250

Ca a fonctionner jusque maintenant et de puis aujourd hui, qd je veux scanner quelques chose cette fenêtre s'ouvre:

L'imprimante et en cours d'utilisation ou une erreur c'est produite.
Vérifier l'état.
Le pilote va être fermé.
code: 2,140,21

Que dois-je faire pour remédier à ce problème?
Merci pour votre aide
Configuration: Windows 7 / Safari 534.24

Votre PC ne peut pas utiliser un autre écran.

Bonjour à toutes et à tous, j'espère que vous allez bien.
Je voulais savoir si vous aviez une solution à mon problème, je vous explique :
J'ai récemment fait la mise à jour de mon ordinateur portable
Depuis cette mise à jour, je ne peux plus connecter mon ordinateur à mon PC via un câble HDMI. Le message suivant apparaît : Votre PC ne peut pas utiliser un autre écran. Essayez de réinstaller le pilote ou d'utiliser une autre carte vidéo.
J'ai déjà essayé de mettre à jour les pilotes/drivers mais d'après Windows Update et le gestionnaire de périphérique, tout est à jour. J'ai même essayé de mettre à jour manuellement les pilotes mais rien y fait. Quand j'essaie de...

Transfert de fichier via telephone au PC

Bonjour,

Je cherche à savoir comment copier des fichiers du téléphone au PC. Quand je fais l'action,ça me met '' erreur- la ressource demandée est en cours d'utilisation". Que dois je faire ? Merci pour l'aide