Question

In Jquery Template website they gave this example.(http://api.jquery.com/jQuery.template/)

<script>
    var movies = [
        { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
        { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
        { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
    ];

    var markup = "<tr><td colspan='2'>${Name}</td><td>Released: ${ReleaseYear}</td><td>Director: ${Director}</td></tr>"

    /* Compile markup string as a named template */
    $.template( "movieTemplate", markup );

    /* Render the named template */
    $( "#showBtn" ).click( function() {
        $( "#movieList" ).empty();
        $.tmpl( "movieTemplate", movies ).appendTo( "#movieList" );
    });
</script>

My only question is how do i create this

var movies = [
    { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
    { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
    { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];

data dynamically using a for loop? I tried creating this structure using a loop[very dirty way] and it didnt worked(probably because what i created was a similar looking string) and i guess its expects an array.

Answer 1

This is an JSON Object Array.

myArray.push({name: depName, value: depValue});

with push you are able to add new Elements. Read your data from somewhere and insert it into your array.