Utilisation d'un Json pour injection dans le DOM

Meums -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention - 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.

Afficher la suite

A voir également:

Utilisation d'un Json pour injection dans le DOM
Utilisation chromecast - Guide
Télécharger gratuitement notice d'utilisation - Guide
Impossible d'utiliser ce numéro de téléphone pour la validation - Forum Gmail
La ressource demandée est en cours d'utilisation - Forum Téléphones & tablettes Android
Cliquez sur ce lien. en n'utilisant que le clavier, quel mot obtenez-vous ? ✓ - Forum souris / Touchpad

1 réponse

Réponse 1 / 1

jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention 4 752

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

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

Avis site Crush dom tom / crushdomtom.com

Ressource demandée en cours d'utilisation

L'imprimante et en cours d'utilisation ou une

Votre PC ne peut pas utiliser un autre écran.

Votre réponse

Discussions similaires