4 Replies Latest reply on Jul 3, 2014 3:02 AM by joel_pau

    JSON data into HTML Table

    mattmad123

      I'm new to jQuery, Edge Animate and this Forum..... and pretty novice at HTML5 and CSS3 so I could really use some assistance, PLEASE :-)

       

      I have a JSON file with numerous records.  I would like each record to represent one row in an html table.  The JSON file gets over written each night and the number of records in the JSON file will change often.  I would like to write the values of the file into a dynamic html table then use various animations to bring the table into view on the stage!  Possible?  Or is there a better way?

       

      Example of my JSON:

       

      [{"id":1,

      "Division":"Austin",

      "txt_one":9,

      "txt_two":5,

      "txt_three":20,

      "txt_four":5

      },

      {"id":2,

      "Division":"Houston",

      "txt_one":0,

      "txt_two":4,

      "txt_three":0,

      "txt_four":7

      },

      {"id":3,

      "Division":"Phoenix",

      "txt_one":1,

      "txt_two":2,

      "txt_three":3,

      "txt_four":6

      }]

        • 1. Re: JSON data into HTML Table
          joel_pau Level 5

          Hi,

           

          Well, 2 main roads.

          1 person found this helpful
          • 2. Re: JSON data into HTML Table
            joel_pau Level 5

            1) html option (a symplistic table).

             

            A) Code:

            var myList = { rows : [

            {"id":1,"Division":"Austin","txt_one":9,"txt_two":5,"txt_three":20,"txt_four":5},

            {"id":2,"Division":"Houston","txt_one":0,"txt_two":4,"txt_three":0,"txt_four":7},

            {"id":3,"Division":"Phoenix","txt_one":1,"txt_two":2,"txt_three":3,"txt_four":6}

            ]};

             

            var rows ="";

             

            $.each( myList.rows, function(index,item){

            rows += "<tr><td>"+item.id+"</td><td>"+item.Division+"</td><td>"+item.txt_one+"</td><td>"+item.txt_two+"</td><td>"+item.txt_three+"</td><td>"+item.txt_four+"</td></tr>";

            } );

             

            sym.$("Text").html("<table>"+rows+"</table>");

             

            sym.$("table").css( "width", sym.$("Text").width() );

            sym.$("table,td").css({"border": "1px solid black", "border-spacing": "5px"})

            sym.$("tr").css("background", "#acc5a0");

            sym.$("td").css("text-align","center").css("color", "white");

            B) Return on stage:

            tableHTML.jpg

             

            2) display option.

            Could you please post an edge file with your symbol model ?

            I mean your row model.

            • 3. Re: JSON data into HTML Table
              mattmad123 Level 1

              worked perfectly!  THANKS!!!

               

              Sent from my Windows Phone

              • 4. Re: Re: JSON data into HTML Table
                joel_pau Level 5

                A demo file using a symbol rather than html tags. You can use Edge timeline to animate your array.

                 

                symbol table: demo file.

                 

                Code :

                var myList = { rows : [

                  {"id":1,"Division":"Austin","txt_one":9,"txt_two":5,"txt_three":20,"txt_four":5},

                  {"id":2,"Division":"Houston","txt_one":0,"txt_two":4,"txt_three":0,"txt_four":7},

                  {"id":3,"Division":"Phoenix","txt_one":1,"txt_two":2,"txt_three":3,"txt_four":6}

                ] };

                 

                $.each( myList.rows, function(index, item){

                  var rows = sym.createChildSymbol("row", "tableContainer");

                  rows.$('rank').html(item.id);

                  rows.$('team').html(item.Division);

                  rows.$('data1').html(item.txt_one);

                  rows.$('data2').html(item.txt_two);

                  rows.$('data3').html(item.txt_three);

                  rows.$('data4').html(item.txt_four);

                  rows.getSymbolElement().css("margin","6px");

                } );

                 

                To go further:

                1) I don’t use display properties (CSS display property) because my symbol is a row. If my symbol was a cell then I would have used the display properties.

                2) To implement a json file, you have to use $.ajax() or $.getJSON() to load your datas.

                1 person found this helpful