4 Replies Latest reply on Aug 18, 2014 9:14 AM by joel_pau

    Populating fields from a json file

    CPBTenner Level 1

      I am trying to create a simple photo slideshow using a .json file, which is a first for me.  I have a photo image, a title div, and a desc div on the stage, along with 2 buttons to cycle forward and backward.  The json file, slides.json, is located in a folder with the .an file and I have the following code on the stage as a compositionReady:

       

      //Variable

      imageCount = 2;

      displayCount = 1;

       

       

      //JSON

      $.getJSON("slides.json", function(data){

       

          //Load Data

          function loadData(i) {

              sym.$("photo").attr("src", data[i].image);

       

              // Using the data for text

              sym.$("title").html( data[i].title);

              sym.$("desc").html( data[i].desc);

              sym.$("countText").html(displayCount + " of " + data.length);

       

          }

       

          loadData(imageCount);

       

       

      });

       

      Nothing happens when I test it in a browser.  I believe there is a disconnect between the AE file and the .json file.  Here is the code in the .json file:

       

      [

              {

              "title":"Apache Sprayer",

              "desc":"2000 Apache Sprayer, 1,000 Gal. Poly Tank, w/90 ft. Boom, Trimble Auto Steer, 2 Sets of Floater & Narrow Tires. Call for Price”,

              "image":"images/photo_1.jpg"

              },

              {

              "title":"Apache 880",

              "desc":"2002 Apache 880, 1,000 Gal. Poly Tank, w/90 ft. Boom, Trimble Auto Steer, 2 Sets of Floater & Narrow Tires. Call for Price”,

              "image":"images/photo_2.jpg"

              },

              {

              "title":"2006 John Deere 4720",

              "desc":"2006 John Deere 4720, Only 829 Hours! 800 Gallon Poly Tank, 60/90 Boom. Call for Price”,

              "image":"images/photo_3.jpg"

              },

              {

              "title":"2013 Miller 5400",

              "desc":"2013 Miller 5400, 1,600 Gallon SS Tank, 100 ft. Boom, Loaded! Call for Price”,

              "image":"images/photo_4.jpg"

              },

              {

              "title":"2014 Miller Condor GC75",

              "desc":"20 Ft. Truss Boom, FWA, 1200 Gal. SS Tank. Call for Price”,

              "image":"images/photo_5.jpg"

              },

              {

              "title":"2013 CrustBuster 1075",

              "desc":"2013 CrustBuster 1075, also CrustBuster. Call for Price”,

              "image":"images/photo_6.jpg"

              },

              {

              "title":"Versatile 550",

              "desc":"Versatile 550 Tractor, Big Wheels, Red Color, Very Fast. Call for Price”,

              "image":"images/photo_7.jpg"

              },

              {

              "title":"Versatile 550 Traxter",

              "desc":"Versatile 550 Traxter, Independent Tracks, Red Color, Pretty Fast. Call for Price”,

              "image":"images/photo_8.jpg"

              },

              {

              "title":"Kubota Tractor/Loader",

              "desc":"Kubota Tractor/Loader. Can't Get Lost Paint Scheme. Call for Price”,

              "image":"images/photo_9.jpg"

              },

              {

              "title":"2000 Kubota Tractor/Loader",

              "desc":"2000 Kubota Tractor/Loader. Wheels, Tires, Windows, Loader. The Works! Call for Price”,

              "image":"images/photo_10.jpg"

              },

              {

              "title":"Miller Nitro 200",

              "desc":"Miller Nitro 200, 1999, Raven 460 Controller, 60' Boom, 1,000 Gallon Poly, 3,957 Hours. Call for Price”,

              "image":"images/photo_11.jpg"

              },

              {

              "title":"2013 Miller Nitro N2XP",

              "desc":"2013 Miller Nitro N2XP, 1,000 Gal. Poly Tank, 6/90 Mono Boom. Call for Price”,

              "image":"images/photo_12.jpg"

              },

              {

              "title":"Miller Nitro 200",

              "desc":"Miller Nitro 200. Low Hours, Nice! Call for Price”,

              "image":"images/photo_13.jpg"

              },

              {

              "title":"Thunder Creek ADT 990",

              "desc":"Thunder Creek ADT 990, 990 Gallons of Fuel Def Urea Storage Tank, Hose Reel, Gas Engine, Loaded! Call for Price”,

              "image":"images/photo_14.jpg"

              },

              {

              "title":"Rogator 854",

              "desc":"1999 Rogator 854, 800 Gal. Poly Tank, 80 Ft. Boom, Trimble EZ Guide w/EZ Steer. Call for Price”,

              "image":"images/photo_15.jpg"

              },

              {

              "title":"Versatile RT490 Combine",

              "desc":"Versatile RT490 Combine, Tough As Nails, Ready for the Combine Destruction Derby. Call for Price”,

              "image":"images/photo_16.jpg"

              },

              {

              "title":"Schulte Batwing Mower",

              "desc":"Schulte Batwing Mower, Batman has this exact mower only in black. Call for Price”,

              "image":"images/photo_17.jpg"

              },

              {

              "title":"Spray-Air 3400",

              "desc":"Spray-Air 3400, 1,000 Gallon, 90 ft Trident II Boom. Call for Price”,

              "image":"images/photo_18.jpg"

              },

              {

              "title":"MF Tractor w/MF Loader",

              "desc":"MF Tractor w/MF Loader, this MF is loaded with MF accessories! The best MF in town! Call for MF Discount Price”,

              "image":"images/photo_19.jpg"

              },

              {

              "title":"Versatile 310 Tractor",

              "desc":"Versatile 310 Tractor, Windows, Wheels and Weights. WOW!! Call for Price”,

              "image":"images/photo_20.jpg"

              }

      ]

       

      Can someone please help me out, I have been staring at this code for way too long and I am certain it is something quite simple.

       

      Thanks,

       

      Brandon

        • 1. Re: Populating fields from a json file
          joel_pau Level 5

          Hi,

           

          So, 2 issues: how to browse json datas and your trouble.

           

          1) Browsing json datas.

           

          $.getJSON( "slides.json", function(data){

            var total = data.mySlides.length;

            $.each( data.mySlides, function(index,item){

            console.log("element #:"+index,item.title,item.desc,item.image);

            //sym.$("photo").attr("src", item.image);

            //sym.$("title").html( item.title);

            //sym.$("desc").html( item.desc);

            //sym.$("countText").html(index + " of " + total);

            });

          });

           

          My json file:

          {"mySlides":[

          {"title":"Apache Sprayer","desc":"2000 Apache Sprayer, 1,000 Gal. Poly Tank, w/90 ft. Boom, Trimble Auto Steer, 2 Sets of Floater & Narrow Tires. Call for Price","image":"images/photo_1.jpg"},

          ...

          {"title":"Versatile 310 Tractor","desc":"Versatile 310 Tractor, Windows, Wheels and Weights. WOW!! Call for Price","image":"images/photo_20.jpg"}

          ]}

           

          Here is an array: var slides = [];

          Here is an object : var slides = {};

          The user manual is here: RFC 4627 - The application/json Media Type for JavaScript Object Notation (JSON)

           

          2) Your trouble: the json file.

           

          Your json file has a wrong double quote after: "call for Price". The wrong double quote: Price”,

          So 20 errors?

          After checking double quotes, your code should run fine.

           

          You can check a json file here: JSLint,The JavaScript Code Quality Tool

          1 person found this helpful
          • 2. Re: Populating fields from a json file
            CPBTenner Level 1

            Thank you Joel, I knew it was going to be something simple.  Serves me right for using TextEdit to write my json file.  From now on I will use NetBeans, as soon as I opened it up it showed me exactly what you had pointed out.  Once the quotes were fixed the data populated correctly. Thanks again!!

             

            Brandon

            • 3. Re: Populating fields from a json file
              CPBTenner Level 1

              A follow up issue:

               

              I am putting this knowledge into practice with an online cube ad that will dynamically load and rotate through the images/text from my json file.  When the preloader disappears the ad shows my placeholder image and text for a split second before switching to the json image/text.  This throws off the 5 second transition, the text changes first, then the picture.  Is there a way to make them transition together?

               

              Also, I am sure there is a better way to set a 5 second animation delay, I just couldn't find it so this was my workaround hack solution, the opacity is already at 1 so nothing changes, but it takes up 5 seconds. If you have the correct way to set an animation delay that would be helpful as well.

               

              Here is a sample of my ad: http://www.capitalpress.biz/html5ads/cubes/nyssatractor/nyssatractortest.html

               

              The code I entered on the stage of my EA document is the following:

               

               

              //Variable

              imageCount =     0;

               

              //JSON

              $.getJSON("slides.json", function(data){

               

                  //Load Data

                  function loadData(i) {

                      sym.$("photo").attr("src", data[i].image);

               

                      // Using the data for text

                      sym.$("title").html( data[i].title);

                      sym.$("desc").html( data[i].desc);

                      sym.$("price").html(data[i].price);

                      sym.$("photo").animate({opacity: 1}, 5000, function() {

                          imageCount++;

               

                          if (imageCount >= data.length) {

                              imageCount = 0;

                          }

               

                          loadData(imageCount);

                      });

               

                  }

               

                  loadData(imageCount);

               

              });

              • 4. Re: Re: Populating fields from a json file
                joel_pau Level 5

                Well, you are using Edge Animate as a jQuery editor rather than its own features.

                1) jQuery option:

                You can group several elements and animate the group.

                Step #1: you select several divs using cmd (or ctrl) + mouse.

                Step #2: right click (mouse) to group.

                Step #3: you code applying animate function to the group.

                 

                2) Edge option:

                It means Edge features.

                Step #1: you convert your stage elements to a symbol.

                Step #2: then you animate your symbol using the timeline.

                ...

                Step #3: then you animate using the edge function: .play().