How to Provide Cloud-Based JSON Data to Windows 8 Metro Grid with JS?

Question

I'm developing an App for Windows 8 but I'm having some troubles, I need to get some information with a JSON request with PHP:

        var result;
        WinJS.xhr({
            url: "http://localhost:81/tipsal/queryTest.php"
        }).done(
          function (success) {
              return success.responseText;
              //              console.log(JSON.parse(success.responseText));
          },
          function (error) {
              console.log(JSON.parse(error.responseText));
          }
        );

When I try that code with this previous code:

        var result = getSampleItems();

        var sampleItems = [
            { group: sampleGroups[0], title: "Pupusas", description: "Las pupusas son tortillas echas de masa de maíz rellenas con queso, chicharron, entre otros. Se comen con curtido de repollo y salsa de tomate.", content: ingredients + "<li>1 lb. masa de maíz o arroz</li><li>&frac14; lb. quesillo (o queso de hila)</li><li>&frac14; lb. chicharron molido</li><li>&frac14; lb. frijoles molidos</li>" + procedure + "Se prepara la masa, luego se hace una tortilla, dentro de la tortilla se hecha quesillo, chicharon o frijoles, luego se cierra la tortilla en forma de bolita y se palmea para que quede en forma de tortilla de nuevo, se pone en el comal y se le da vuelta continuamente hasta que se cosa bien.</p>", backgroundImage: thumbnails + "comidas/pupusas.jpg", imgGallery: generateImageGallery(1), titleGallery: generateTitleGallery(1), rate: 5 },
            { group: sampleGroups[0], title: "Tamales de elote (occidente)", description: "Platillo de origen indígena preparados con harina de maíz cocida normalmente al vapor, envuelta en hojas de la misma planta.", content: ingredients + "<li>14 tazas de maíz en grano entero (utilizar maíz congelado si no hay maíz fresco disponible)</li><li>1 taza de harina de maíz</li><li>1 taza de mantequilla</li><li>&frac12; taza de manteca</li><li>1 cucharada de polvo de hornear</li><li>1 taza de azúcar</li><li>2 huevos</li><li>1 cucharada de sal</li><li>70 hojas de elote</li>" + procedure + "Licuar el maíz en una licuadora hasta obtener una consistencia de puré. Si la mezcla parece muy seca, agregar un poco de agua o leche.</p><p>Colocar el puré en un recipiente grande junto con la harina de maíz; batir con una batidora. Agregar lentamente la mantequilla y la manteca y continuar batiendo. Agregar azúcar y continuar batiendo hasta obtener una mezcla homogénea. Agregar los huevos, el polvo de hornear y la sal y batir durante aproximadamente 20 minutos o hasta que la masa esté suave. Dejar reposar durante 15 minutos.</p>", backgroundImage: thumbnails + "comidas/tamales_elote.jpg", imgGallery: generateImageGallery(2), titleGallery: generateTitleGallery(2), rate: 4 },
            { group: sampleGroups[0], title: "Pan con pollo", description: "Los panes con pollo son muy conocidos en El Salvador, sobretodo por su salsa que es lo más delicioso.", content: ingredients + "<li>Pan frances</li><li>1 Pollo</li><li>6 Tomates</li><li>1 Cebolla</li><li>1 Ajo</li><li>1 Chile Verde</li><li>Hojas de laurel (al gusto)</li><li>1 Pepino</li><li>1 Lechuga</li><li>Mayonesa (al gusto)</li>" + procedure + "El pollo se limpia, y se corta. en una cacerola se agrega aceite, luego se dora un poquito el pollo con sazonador y sal al gusto, cuando ye esta sofriendo. se hace la salsa, se pone el la licuadora tomate, cebolla, ajo, chile, hoja de laurel, se le agrga un cubito de pollo. Cuando ya esta la salsa, se le agrega al pollo, que se cocina 30 minutos, o hasta que el pollo este listo. por otra parte ya se tiene listo las legumbres bien lavadas, el repollo se corta en rebanaditas, y para que les queda bien, lo pasan sofiendo en un poquito de margarina. Cuando ya este listo todos, se abre un pan frances, si gustan lo ponen al oven un ratito para que quede tostado, se le agrega mayonesa, se pone tomate, rabano, lechuga, un pedaso de pollo, arriba el repollo picadito. Cuando ya esten listos los panes preparados, le pueden hechar salsita del mismo pollo donde se cocio.</p>", backgroundImage: thumbnails + "comidas/pan_pollo.jpg", imgGallery: generateImageGallery(3), titleGallery: generateTitleGallery(3), rate: 4.4 },
            { group: sampleGroups[0], title: "Frijoles borrachos", description: "Es una comida muy frecuente en el campo, es una mezcla de frijoles cocidos con otras comidas como salchichas y salsa.", content: ingredients + "<li>1 libra de frijoles rojos cocidos</li><li>3 salchichas de su elección</li><li>&frac12; chile verde</li><li>&frac12; cebolla</li><li>1 tomate</li><li>1 cucharada de mostaza</li><li>3 cucharadas de salsa inglesa</li><li>&frac12; de ron o cerveza</li><li>2 cucharadas de aceite</li>" + procedure + "Cortar en juliana el chile, la cebolla y el tomate.</p><p>Colocar en la sarten el aceite, el chile, la cebolla y el tomate cocinar hasta que la cebolla este cristalizada. Hechar los frijoles a la sarten, ya cocidos y un poco triturados con la mano o una taza.</p><p>Ponerle la salsa inglesa, la mostaza y la cerveza o el ron. Dejar cocinar de 15 a 20 mins.</p>", backgroundImage: thumbnails + "comidas/frijoles_borrachos.jpg", imgGallery: generateImageGallery(4), titleGallery: generateTitleGallery(4), rate: 4.2 },

            { group: sampleGroups[1], title: "Horchata de Arroz", description: "Es una bebida refrescante tradicional de amplio consumo en El Salvador. Es conocida por su color oscuro y sabor azucarado.", content: ingredients + "<li>2 Tazas de Arroz remojado durante 2 horas</li><li>4 Tazas de Agua</li><li>2 Rajas de Canela</li><li>2 Tazas de Leche</li><li>Azúcar (al gusto)</li><li>Hielo (al gusto)</li>" + procedure + "Se deja remojar el arroz en agua durante 2 horas, después se le escurre el agua y se licuan con las 4 tazas de agua, canela y leche y se vacea en una jarra, se endulza y se le pone hielo.</p>", backgroundImage: thumbnails + "bebidas/horchata.jpg", imgGallery: generateImageGallery(5), titleGallery: generateTitleGallery(5), rate: 5 },
            { group: sampleGroups[1], title: "Atol Shuco", description: "Una bebida caliente típica de El Salvador y en las fronteras de Honduras. Está compuesta de masa de maíz, agua, sal y alguashte.", content: ingredients + "<li>1 lb. Maíz negrito (morado)</li><li>* Semillas de Calabaza.</li><li>* Frijoles negros</li><li>* Salsa picante (chile)</li><li>* Sal</li><li>Limón (opcional)</li><li>Polvo de alguashte diluido en el mismo atol</li>" + procedure + "Lave el maíz en la tarde lo lleva al molino y lo deja bien tapado, fuera del refrigerador.</p><p>Al día siguiente le agrega, agua suficiente y lo cuela en una manta, le pone el agua necesaria y un poco de sal, cocínelo moviendo constantemente hasta que esté cocido. Para sentir el olor a crudo, levante la cuchara y huélalo, cocine hasta que no tenga olor a crudo y que esté espeso, si le gusta más ralito le pone más el agua sino déjelo con agua con que lo ha colocado.</p><p>Sírvalo con frijoles salcochados, chile y polvo de alguashte diluído en el mismo atol.</p>", backgroundImage: thumbnails + "bebidas/atol_shuco.jpg", imgGallery: generateImageGallery(6), titleGallery: generateTitleGallery(6), rate: 3.5 },
            { group: sampleGroups[1], title: "Atol de Elote", description: "Es una bebida americana a base de maíz, y en sus orígenes se consumía diariamente, calientes por la mañana y entrada la tarde.", content: ingredients + "<li>15 elotes medianos (Use elote sazon, de preferencia amarillo)</li><li>2 litros de agua</li><li>1 cucharada de azúcar</li><li>1 cucharada de sal</li><li>1 raja grande de canela.</li><li>2 &frac34; tazas de azúcar (al gusto)</li><li>3 cucharadas de sal (al gusto)</li>" + procedure + "Prepare los granos de elote, poniendo a cocer 5 elotes en 1 litro del agua, en una cucharita de sal y 2 de azúcar. Cuando esten cocidos, dejarlos que enfrien y, desgranelos. Ponga los granos en un recipiente y apartelos.</p><p>Por otro lado, desgrane o rebane 10 elotes. Muelalos en una licuadora, lo mas fino posible. poco a poco, agreguele &frac12; litro del agua. Con un colador de cedazo, colar el elote. Ya colado, agreguele &frac12; litro del agua con la canela, la sal y el azúcar. Poner a cocer a fuego medio, sin dejar de moverlo haste que espese y se cueza. El atole debe hervir suavemente por aproximadamente 10 minutos. Después que espese, estara cocido.</p><p>Servir en vasos, regandole granos de elotes cocidos (ver primer parrafo) y polvo de canela, al gusto.</p>", backgroundImage: thumbnails + "bebidas/atol_elote.jpg", imgGallery: generateImageGallery(7), titleGallery: generateTitleGallery(7), rate: 3.7 },

            { group: sampleGroups[2], title: "Nuégados de Huevo", description: "Uno de los postres más conocidos de El Salvador hecho con huevo y cubierto de dulce, por lo general es acompañado con Atol Shuco.", content: ingredients + "<li>3 onzas de azúcar</li><li>4 huevos</li><li>3 onzas de manteca vegetal</li><li>2 onzas de levadura en polvo</li><li>1 libra de harina</li><li>&frac12; vaso de agua</li><li>&frac12; taza de aceite</li><li>&frac12; taza de azúcar glass o azúcar pulverizada</li><li>Anís al gusto</li>" + procedure + "En un bol coloque el azúcar, los huevos, la manteca vegetal, el agua y la levadrua en polvo. bata los ingredientes hasta obtener una fórmula suave.</p><p>A la mezcla anterior revuelvale la harina y el anís. con la pasta obtenida forme pequeñas bolitas y reservelas.</p>Caliente el aceite en una sartén y fría a fuego lento las bolitas de harina. al estar listas retírelas del fuego.<p>Ponga azúcar glass sobre una bandega y empanice las bolitas doradas, deje enfriar y sírvalas.</p>", backgroundImage: thumbnails + "postres/nuegados.jpg", imgGallery: generateImageGallery(8), titleGallery: generateTitleGallery(8), rate: 4.7 }

        ];

It doesn't work because the WinJS.xhr is executed after the sampleItems, why? it doesn't have sense.

---

Federico Navarrete

Answer 1

Where exactly do you make the call to WinJS.xhr ? Could you please provide a more complete code? WinJS.xhr() is an asynchronous function which returns a promise, so the code can continue without the task is actually completed.

---

http://www.renauddumont.be

Answer 2

Hi FANMixco,

It seems you're using traditional synchronous programming pattern to write the code in your windows store javascript application. In Windows Store app, many APIs are naturally asynchronous (such as the WinJS.xhr network call). When you call WinJS.xhr, it immediately returns and you need to put your sequential code (such as get the returned data and bind them to ListView control or other controls) in the complete callback function. e.g.

var result;
        WinJS.xhr({
            url: "http://localhost:81/tipsal/queryTest.php"
        }).done(
          function (success) {
       
  // do not return things in "done" callback
       console.log(JSON.parse(success.responseText));
              // parse data items from responseText (such as using xml dom api)
              // and then bind data to UI controls 
      
          },
          function (error) {
              console.log(JSON.parse(error.responseText));
          }
        );

here are some reference and articles introducing windows store js asynchronous programming:

#Asynchronous programming in JavaScript (Windows Store apps) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/hh700330.aspx

#Quickstart: using promises (Windows Store apps using JavaScript and HTML) (Windows)
http://msdn.microsoft.com/en-us/library/windows/apps/Hh700339.aspx

#Asynchronous Programming in JavaScript with “Promises”
http://blogs.msdn.com/b/ie/archive/2011/09/11/asynchronous-programming-in-javascript-with-promises.aspx

you can also have a look at the sdk sample for detailed usage of "WinJS.Promise" object:

http://code.msdn.microsoft.com/windowsapps/Promise-e1571015

---

Please remember to mark the replies as answers if they help and unmark them if they provide no help.