locked
Consommation difficile d'un Web Service JSON RRS feed

  • Question

  • Bonjour,

    A partir d'une appli W8 universelle obtenue par défaut dans Visual Studio, je souhaite récupérer des données JSON à travers le code suivant :

    function JSonRecord(event) {
            WinJS
                .xhr(
                        { url: "http://www.litterateur.fr/SW/dertex.php" }
                     )
                .then
                     (
                        function (response) {
                            var name = JSON.parse(response.responseText);
                            document.getElementById("Title").value = name.titre;
                        }
                     );
        }



    A insérer ici (section1Page.html):

    <div class="title label-extralarge" id="Title"></div>


    * Premièrement je ne sais pas s'il faut intégrer ma fonction js dans le fichier default.js (de la partie partagée) ou dans section1Page.js .

    * Ensuite, peu importe dans quel js j'intégre ma fonction, rien ne s'affiche dans la balise div. Ni dans l'appli W8, ni dans l'appli Windows phone.

    Savez-vous d'où vient le problème ?

    mercredi 18 février 2015 12:10

Réponses

  • Bonjour,

    Vous n'avez pas besoins de WinJS.Binding.define puisque dans notre cas, nous appliquons le template sur un élément en lui fournissant les données. il n'y a pas de binding à proprement parler.

    Par contre, dnas votre exemple, je comprends pourquoi vous ne voyez rien s'afficher. Vous avez oublié d'appeler votre méthode JSonRecord.

    Pour faire simple, j'ai mis le contenu de cette méthode dans le corp de la méthode ready de la page Section1. 

    Voila le contenu de ce que j'ai fais :

    (function () {
        "use strict";
    
        var ControlConstructor = WinJS.UI.Pages.define("/pages/hub/section1Page.html", {
            // This function is called after the page control contents 
            // have been loaded, controls have been activated, and 
            // the resulting elements have been parented to the DOM. 
            ready: function (element, options) {
                options = options || {};
    
                WinJS.xhr({ url: "http://www.litterateur.fr/SW/dertex.php" })
                    .then(function (response) {
                        var data = JSON.parse(response.responseText);
                        document.getElementById("Title").innerText = data.titre;
    
                        var template = document.querySelector("#template");
    
                        template.winControl.render(data, document.querySelector("#content"));
                    });
            },
        });
    
        // The following lines expose this control constructor as a global. 
        // This lets you use the control as a declarative control inside the 
        // data-win-control attribute. 
    
        WinJS.Namespace.define("HubApps_SectionControls", {
            Section1Control: ControlConstructor
        });
    })();


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="/pages/hub/section1Page.js"></script>
    </head>
    <body>
        <div class="fragment section1page">
            <section aria-label="Main content" role="main">
                <div class="title label-extralarge" id="Title"></div>
                <div id="content"> </div>
            </section>
    
            <div id="template" data-win-control="WinJS.Binding.Template">
                <div class="title label-extralarge" data-win-bind="textContent: titre"></div>
                <div class="subtext label-medium" data-win-bind="textContent: texte"></div>
                <div class="label-mediummid">
                    <span data-win-bind="textContent: auteur"></span>
                </div>
            </div>
        </div>
    </body>
    </html>

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    • Marqué comme réponse Misterned jeudi 19 février 2015 09:03
    jeudi 19 février 2015 08:50

Toutes les réponses

  • Bonjour,

    Vous faites une mauvaise affectation de valeur.

    document.getElementById("Title").value = name.titre;

    Doit être en fait :
    document.getElementById("Title").innerText = name.titre;

    Ensuite, pour l'emplacement de ce code :

    De preference, mettez le code JS d'une page dans un fichier spécifique à la page en question.

    Enfin, pour une meilleur lisibilité, utilisez des templates pour le binding de vos éléments dans le code HTML.

    Plus d'infos : https://msdn.microsoft.com/en-us/library/windows/apps/Hh700356.aspx

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    mercredi 18 février 2015 12:41
  • Merci pour votre réponse.

    J'avais effectivement prévu d'utiliser des templates pour le binding de mes éléments mais, auparavant, je souhaitais réussir à récupérer mes données JSON.

    Et l'affectation innerText n'a pas réglé mon problème.

    Je vous donne l'intégralité des deux fichiers concernés (les seuls modifiés du projet par défaut) :

    section1Page.js :

    (function () {
        "use strict";
    
        var ControlConstructor = WinJS.UI.Pages.define("/pages/hub/section1Page.html", {
            // Cette fonction est appelée une fois que le contenu du contrôle de page 
            // a été chargé, que les contrôles ont été activés et que 
            // les éléments résultants ont été apparentés au modèle DOM. 
            ready: function (element, options) {
                options = options || {};
            },
        });
    
        // Les lignes suivantes exposent ce constructeur de contrôle comme global. 
        // Cela vous permet d'utiliser le contrôle comme un contrôle déclaratif dans 
        // l'attribut data-win-control. 
    
        function JSonRecord(event) {
            WinJS
                .xhr(
                        { url: "http://www.litterateur.fr/SW/dertex.php" }
                     )
                .then
                     (
                        function (response) {
                            var name = JSON.parse(response.responseText);
                            document.getElementById("Title").innerText = name.titre;
                        }
                     );
        }
        WinJS.Namespace.define("HubApps_SectionControls", {
            Section1Control: ControlConstructor
        });
    })();

    section1Page.html :

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title></title>
        <script src="/pages/hub/section1Page.js"></script>
    </head>
    <body>
        <div class="fragment section1page">
            <section aria-label="Main content" role="main">
                <img src="/images/cailloux_pieds.jpg" />
                <div class="title label-extralarge" id="Title"></div>
                <div class="title label-extralarge" data-win-res="{ textContent: 'Section1Title' }"></div>
                <div class="subtext label-medium" data-win-res="{ textContent: 'Section1Subtext' }"></div>
                <div class="label-mediummid">
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                    <span data-win-res="{ textContent: 'Section1Description' }"></span>
                </div>
            </section>
        </div>
    </body>
    </html>

    Le Json vous y avez accès.

    Merci par avance

    mercredi 18 février 2015 13:43
  • Bonjour,

    Votre façon de vous binder n'est pas bonne:
    <span data-win-res="{ textContent: 'Section1Description' }"></span>
    
    

    Vous devez utiliser l'attribut bind et non res..
    <span data-win-bind="textContent: Section1Description"></span>

    Ensuite, votre template doit$être appliqué à un élément du DOM en lui fournissant l'objet du context.

    Voici le résultat finale :

    WinJS.xhr({ url: "http://www.litterateur.fr/SW/dertex.php" })
                .then(function (response) {
                    var data = JSON.parse(response.responseText);
                    document.getElementById("Title").innerText = data.titre;
    
                    var template = document.querySelector("#template");
    
                    template.winControl.render(data, document.querySelector("#content"));
                });

    <section aria-label="Main content" role="main">
            <div class="title label-extralarge" id="Title"></div>
            <div id="content"> </div>
        </section>
    
        <div id="template" data-win-control="WinJS.Binding.Template">
            <div class="title label-extralarge" data-win-bind="textContent: Section1Title"></div>
            <div class="subtext label-medium" data-win-bind="textContent: Section1Subtext"></div>
            <div class="label-mediummid">
                <span data-win-bind="textContent: Section1Description"></span>
                <span data-win-bind="textContent: Section1Description"></span>
                <span data-win-bind="textContent: Section1Description"></span>
            </div>
        </div>

    Cordialement,



    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    mercredi 18 février 2015 15:23
  • Bonjour,

    voir ce lien :

    http://carter.rabasa.com/2012/03/05/using-winjs-xhr-to-post/

    mercredi 18 février 2015 16:16
  • Ne s'affiche que section1Title  M. Beaugrand ...


    • Modifié Misterned mercredi 18 février 2015 16:36
    mercredi 18 février 2015 16:24
  • Merci mais il s'agit d'une requête GET ici.

    Cordialement

    mercredi 18 février 2015 16:35
  • Bonjour,

    En réalité tout fonctionne. Il s'agit juste du template en question. Les champs suivants ne sont pas presents dans l'objet Json :

    - Section1Title

    - Section1Subtext

    - Section1Description

    Il n'y a que le champs Title renseigné à la main qui fonctionne.

    Essayez le template suivant à la place, vous verrez :

    <div id="template" data-win-control="WinJS.Binding.Template">
            <div class="title label-extralarge" data-win-bind="textContent: titre"></div>
            <div class="subtext label-medium" data-win-bind="textContent: texte"></div>
            <div class="label-mediummid">
                <span data-win-bind="textContent: auteur"></span>
            </div>
        </div>

    Cordialement


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    mercredi 18 février 2015 17:55
  • Bonjour,

    Je me suis trompé : seule la ressource "Section1" s'affiche et donc également avec votre dernière modification.

    Pourquoi n'avons-nous pas besoin de définir le lien avecWinJS.Binding.define ?

    Cordialement

    jeudi 19 février 2015 07:49
  • Bonjour,

    Vous n'avez pas besoins de WinJS.Binding.define puisque dans notre cas, nous appliquons le template sur un élément en lui fournissant les données. il n'y a pas de binding à proprement parler.

    Par contre, dnas votre exemple, je comprends pourquoi vous ne voyez rien s'afficher. Vous avez oublié d'appeler votre méthode JSonRecord.

    Pour faire simple, j'ai mis le contenu de cette méthode dans le corp de la méthode ready de la page Section1. 

    Voila le contenu de ce que j'ai fais :

    (function () {
        "use strict";
    
        var ControlConstructor = WinJS.UI.Pages.define("/pages/hub/section1Page.html", {
            // This function is called after the page control contents 
            // have been loaded, controls have been activated, and 
            // the resulting elements have been parented to the DOM. 
            ready: function (element, options) {
                options = options || {};
    
                WinJS.xhr({ url: "http://www.litterateur.fr/SW/dertex.php" })
                    .then(function (response) {
                        var data = JSON.parse(response.responseText);
                        document.getElementById("Title").innerText = data.titre;
    
                        var template = document.querySelector("#template");
    
                        template.winControl.render(data, document.querySelector("#content"));
                    });
            },
        });
    
        // The following lines expose this control constructor as a global. 
        // This lets you use the control as a declarative control inside the 
        // data-win-control attribute. 
    
        WinJS.Namespace.define("HubApps_SectionControls", {
            Section1Control: ControlConstructor
        });
    })();


    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="/pages/hub/section1Page.js"></script>
    </head>
    <body>
        <div class="fragment section1page">
            <section aria-label="Main content" role="main">
                <div class="title label-extralarge" id="Title"></div>
                <div id="content"> </div>
            </section>
    
            <div id="template" data-win-control="WinJS.Binding.Template">
                <div class="title label-extralarge" data-win-bind="textContent: titre"></div>
                <div class="subtext label-medium" data-win-bind="textContent: texte"></div>
                <div class="label-mediummid">
                    <span data-win-bind="textContent: auteur"></span>
                </div>
            </div>
        </div>
    </body>
    </html>

    Cordialement,


    Kevin BEAUGRAND, Modis FRANCE
    Merci de bien vouloir "Marquer comme réponse", les réponses qui ont résolu votre problème.

    • Marqué comme réponse Misterned jeudi 19 février 2015 09:03
    jeudi 19 février 2015 08:50
  • Bravo ! Cela fonctionne à merveille.

    Une nouvelle fois merci beaucoup à vous.

    jeudi 19 février 2015 09:03