IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

AJAX Discussion :

Parser du Json dans du javascript


Sujet :

AJAX

  1. #1
    Membre habitué Avatar de kkt8
    Profil pro
    Inscrit en
    janvier 2005
    Messages
    467
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2005
    Messages : 467
    Points : 192
    Points
    192
    Par défaut Parser du Json dans du javascript
    Bonjour,

    J'ai suivi le Tuto https://marcautran.developpez.com/tu...vascript/json/
    pour comprendre comment ça fonctionne tout ça.

    cela ne marche pas, j'ai rien suite au open()
    je met une alert("1") avant c'est ok
    mais apres plus rien.

    J'ai peut-etre un contexte particulier : mon html est lu par Eclipse (welcome page de mon appli eclipse)
    J'ai un problème de cross-domain quand je debug via Chrome mais est-ce pas l'effet chrome justement qui ne s'attends pas à avoir tout en local ?
    Mais tout est en local : mon html et mon json

    Y aurait-il un moyen d'avoir le code d'erreur de retour de open() ou quelque chose du genre ?
    Merci

  2. #2
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    le cross domain est l'erreur "type" quand on commence a faire de l'ajax
    tu ne peux pas requeter un autres domaine (pour des raisons de securite) sauf si le domaine en question l'autorise

    sinon, comme d'hab.... sans code on ne peut pas faire grand chose
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  3. #3
    Membre habitué Avatar de kkt8
    Profil pro
    Inscrit en
    janvier 2005
    Messages
    467
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2005
    Messages : 467
    Points : 192
    Points
    192
    Par défaut
    Hello,

    J'ai testé le même code avec un ulr sur un serveur extern et c'est ok, donc je pense que c'est le fait que mon json soit en local ...
    ce qui est balo !
    Une idée de comment faire avec un json local ?

    Voici mon code:
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    <section class="main__title-second"><h2>What's new</h2></section>
     
    	<script type="text/javascript" src="test.js"></script>
    	<script type="text/javascript">
                // pointeur sur la position de l'article courant dans le catalogue
                var index = 0;
                // initialisation du catalogue
                var catalogue = [];
     
                function executerRequete(callback) {
     
                    // on vérifie si le catalogue a déjà été chargé pour n'exécuter la requête AJAX
                    // qu'une seule fois
                    if (catalogue.length === 0) {
                            
                        // on récupère un objet XMLHttpRequest
                        var xhr = getXMLHttpRequest();
                        
                        // on réagit à l'événement onreadystatechange
                        xhr.onreadystatechange = function() {
                        
                            // test du statut de retour de la requête AJAX
                            if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) {
                                // on désérialise le catalogue et on le sauvegarde dans une variable
                                catalogue = JSON.parse(xhr.responseType);
                                // on lance la fonction de callback avec le catalogue récupéré
                                callback();
                            }
                        }
                        
                        // la requête AJAX : lecture de data.json
                        xhr.open("GET", "test.json", true);
                        xhr.send();
                    } else {
                        // on lance la fonction de callback avec le catalogue déjà récupéré précédemment
                        callback();
                    }
                }
     
                function lireSuivant() {
                    
                    // connaitre le nombre d'articles dans le catalogue
                    var longueur = catalogue.length;
                    alert(longueur);
                    // manipulation du DOM pour afficher les caractéristiques de l'article
                    document.getElementById("nom").innerHTML = catalogue[index].nom;
                    document.getElementById("desc").innerHTML = catalogue[index].desc;
                    document.getElementById("qte").innerHTML = catalogue[index].qte;
                    document.getElementById("prix").innerHTML = catalogue[index].prix;
                    if (index < longueur - 1) {
                        index++;
                    }
                }
                
                function lirePrecedent() {
                    document.getElementById("nom").innerHTML = catalogue[index].nom;
                    document.getElementById("desc").innerHTML = catalogue[index].desc;
                    document.getElementById("qte").innerHTML = catalogue[index].qte;
                    document.getElementById("prix").innerHTML = catalogue[index].prix;
                    if (index > 0) {
                        index--;
                    }
                }
     
                // on initialise la lecture au premier élément
                executerRequete(lireSuivant);
            </script>
    		<section  class="container">
                <article name="données" class="well form-inline pull-left col-lg-5">
                    <legend>Outils au catalogue</legend>
                    <label>Nom</label> : <label id = "nom"></label><br>
                    <label>Description</label> : <label id = "desc"></label><br>
                    <label>Quantité</label> : <label id = "qte"></label><br>
                    <label>Prix</label> : <label id = "prix"></label><br>
                    <button class="btn btn-primary" type="submit" onclick="executerRequete(lireSuivant)"><span class="glyphicon glyphicon-play"> </span> Lecture avant</button>
                    <button class="btn btn-primary" type="submit" onclick="executerRequete(lirePrecedent)"><span class="glyphicon glyphicon-step-backward"> </span> Lecture arrière</button>
                </article>
            </section>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    function getXMLHttpRequest() {
        var xhr = null;
        if (window.XMLHttpRequest || window.ActiveXObject) {
            if (window.ActiveXObject) {
     
                try {
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");
                } catch(e) {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
            } else {
     
                xhr = new XMLHttpRequest(); 
     
            }
        } else {
            alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
            return null;
        }
        return xhr;
    }
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    [
        {
            "nom": "marteau",
            "desc": "pour enfoncer des clous",
            "qte": 87,
            "prix": 9
        },
        {
            "nom": "cle de 12",
            "desc": "pour les boulons du camion",
            "qte": 25,
            "prix": 12
        },
        {
            "nom" : "tournevis" , 
            "desc" : "pour demonter la table" , 
            "qte" : 26 , 
            "prix" : 6
        },
        {
            "nom": "pinces multiples",
            "desc": "pour bricoler le dimanche",
            "qte": 2,
            "prix": 17
        },
        {
            "nom" : "scie a metaux" , 
            "desc" : "pour couper la barriere" , 
            "qte" : 78 , 
            "prix" : 41
        }
    ]
    C'est vraiment copier/coller du tuto... mais c'était sensé être la première étape.
    J'ai essayé de mettre le path en entier mais ko aussi.


    cela ne marche que si le json est sur un serveur.
    Merci
    Chris

  4. #4
    Membre expert
    Avatar de Doksuri
    Profil pro
    Développeur Web
    Inscrit en
    juin 2006
    Messages
    2 052
    Détails du profil
    Informations personnelles :
    Âge : 51
    Localisation : France

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : juin 2006
    Messages : 2 052
    Points : 3 638
    Points
    3 638
    Par défaut
    Citation Envoyé par kkt8 Voir le message
    cela ne marche que si le json est sur un serveur.
    pour des questions de securite, on ne peu pas recup un fichier local

    apres, je t'invites a utiliser le fetch() plutot que le XMLHttpRequest https://developer.mozilla.org/fr/doc...PI/Using_Fetch (qui est une methode plus moderne )
    La forme des pyramides prouve que l'Homme a toujours tendance a en faire de moins en moins.

    Venez discuter sur le Chat de Développez !

  5. #5
    Membre habitué Avatar de kkt8
    Profil pro
    Inscrit en
    janvier 2005
    Messages
    467
    Détails du profil
    Informations personnelles :
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2005
    Messages : 467
    Points : 192
    Points
    192
    Par défaut
    et ça marcherait avec un fichier local ?

  6. #6
    Modérateur
    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 189
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 189
    Points : 37 824
    Points
    37 824
    Par défaut
    Bonjour,
    Mais tout est en local : mon html et mon json
    donc pas de soucis avec le « cross domain » mais les navigateur ne te laisserons faire que si tu passes par un serveur local comme WAMP.


    getXMLHttpRequest()
    Comme dit ta fonction date un peu et pourrait largement être simplifiée ou remplacé par la méthode fetch() si tu peux te passer d'IE.


    Une idée de comment faire avec un json local ?
    Comme dit le plus simple est de passer par un serveur local, cependant tu peux le réaliser en modifiant les paramètres du navigateur ou via la ligne de commande.

    Pour Firefox,
    • ouvrir la page de configuration en tapant dans la barre d'adresse : « about:config » ;
    • mettre le paramètre privacy.file_unique_origin à false.


    Pour Chrome :
    • lancer Chrome avec le flag --allow-file-access-from-files, par exemple : « "C:\Program\Chrome\Application\chrome.exe" --allow-file-access-from-files », le chemin est à adapter bien sûr, voir clic droit -> Propriétés sur l'icône du bureau si tu es sous Window.


    Le mieux restant le serveur local qui te sera toujours utile

Discussions similaires

  1. Récupérer un objet JSON dans un Javascript
    Par demcoul dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 08/08/2019, 00h29
  2. Parser un tableau dans un fichier JSON
    Par L'aigle de Carthage dans le forum jQuery
    Réponses: 8
    Dernier message: 25/03/2014, 16h59
  3. Lire fichier JSON dans JavaScript
    Par alaninho dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 15/03/2013, 07h06
  4. parse json dans un code javascript
    Par chahira83 dans le forum jQuery
    Réponses: 5
    Dernier message: 11/12/2008, 16h39

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo