CODEWITHSUNDEEP
javascriptjqueryangularjs
Oam Psy
Oam Psy

Reputation: 8663

How to write a jQuery style ng-repeat

Im used to using AngularJS for data binding and displaying data to the front end via its directives.

Essentially i have written a jQuery fucntion to get some data from a .JSON file:

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        console.log(myItems);
    });
});

How can i repeat all of the items in myItems in an <li>

In angular terms, it would look like:

<ul>
    <li ng-repeat="address in myItems">
        {{ address.HouseNumber }}, {{ address.Street }}, {{ address.Postcode }}
    </li>
</ul>

How can i get this to work without needing to use Angular?

Upvotes: 1

Views: 69

Answers (4)

Pankaj Parkar
Pankaj Parkar

Reputation: 136154

You code would be look like below

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        var ulElement = $('<ul></ul>')
        $.each(myItems, function(index, value) {
            $('<li></li>').appendTo(ulElement).text(value.HouseNumber + ' '+ value.Street + ' ' + value.Postcode);
        })
        $('#mainDiv').append(ulElement);
    });
});

Upvotes: 1

TobyGWilliams
TobyGWilliams

Reputation: 631

Have a look at the some javascript templating languages, like jTemplates or JsRender.

Upvotes: 1

hurricane
hurricane

Reputation: 6724

Html:

<ul id="example">

</ul>

Script:

$(document).ready(function() {
    var myItems;
    $.getJSON("../assets/data/address.json", function(data) {
        myItems = data.Addresses.AddressList;
        $.each( myItems , function( index, address){
            $('#example').append('<li>'+ address.HouseNumber+', etc..' + '</li>');
        });
    });
});

Upvotes: 1

Ivan Toncev
Ivan Toncev

Reputation: 532

I usually use underscore template for similar things. http://underscorejs.org/#template

Upvotes: 1

Related Questions