CODEWITHSUNDEEP
javascriptjqueryjsonajaxforeach
John
John

Reputation: 3789

Loop through JSON and populate data dynamically

I'm trying to iterate through JSON data and populate the content dynamically using jQuery.

  1. First I do an Ajax request
  2. Then I loop through the data and create the HTML tags dynamically

I create a div container with a class of "product-wrapper" for each JSON object (in this case 2 divs product-wrapper). As you can see on the example of my JSON data, each object has an array of objects "details".

From my second foreach loop - how can I populate the data of "details" within its appropriate "product-wrapper" div?

JavaScript

myApp.init = function(){

    var rates = {
        products: $('.products-container'),
        init: function(){
            rates.showRates();
        },
        showRates: function(){
            $.each(utils.rates, function(index, value){
                rates.products.append(
                    '<div class="product-wrapper">' +
                        '<div class="product-heading">' + value.name + '</div>' +
                        '<div class="product-details"></div>' +
                    '</div>'
                );

                $.each(value.details, function(i,val){
                    $('.product-details').append('<div class="detail-row">' +
                        '<div class="detail detail-balance">' + val.balance + '</div>' +
                        '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
                        '<div class="detail detail-aer">' + val.aer + '</div>' +
                    '</div>');
                });
            });
        }
    };

    var utils = {
        rates: '',
        url: $('.business-interest-rates').attr('data-rates-json'),
        init: function(){
            utils.ajaxRequest();
        },
        ajaxRequest: function(){
            $.ajax({
                url: utils.url,
                dataType: 'json',
                success:function(data){
                    utils.rates = data;

                    if($('#interest-rates').length > 0){
                        rates.init();
                    }
                },
                error: function(e){
                    console.log(e.message);
                }
            });
        }
    };
    utils.init();
};

JSON 

[
    {
        "name":"Australian dollar (AUD)",
        "currency":"AUD",
        "details":[
            {
                "balance": "1+",
                "grossRate": "1.700",
                "aer": "0.5"
            },
            {
                "balance": "500,000+",
                "grossRate": "2.100",
                "aer": "2.00"
            },
            {
                "balance": "1,500,000+",
                "grossRate": "2.450",
                "aer": "1.00"
            }
        ]
    },
    {
        "name":"EURO (EU)",
        "currency":"EU",
        "details":[
            {
                "balance": "1+",
                "grossRate": "1.700",
                "aer": "1.50"
            },
            {
                "balance": "500,000+",
                "grossRate": "2.100",
                "aer": "2.20"
            }
        ]
    }
]

Upvotes: 0

Views: 2975

Answers (1)

Danmoreng
Danmoreng

Reputation: 2367

Either don't use a CSS class to append your stuff but unique ids, or first generate the whole HTML code (wrapper and details all together) in one step and then append it.

// use unique IDs for appending
function () {
    $.each(utils.rates, function (index, value) {
        rates.products.append(
            '<div class="product-wrapper">' +
            '<div class="product-heading">' + value.name + '</div>' +
            '<div id="product-details-' + value.name + '"></div>' +
            '</div>'
        );

        $.each(value.details, function (i, val) {
            $('#product-details-' + value.name).append('<div class="detail-row">' +
                '<div class="detail detail-balance">' + val.balance + '</div>' +
                '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
                '<div class="detail detail-aer">' + val.aer + '</div>' +
                '</div>');
        });
    });
}

// first generate all html code, then append
function () {
    $.each(utils.rates, function (index, value) {
        var html = '<div class="product-wrapper">' +
            '<div class="product-heading">' + value.name + '</div>' +
            '<div class="product-details">';
        $.each(value.details, function (i, val) {
            html += '<div class="detail-row">' +
                '<div class="detail detail-balance">' + val.balance + '</div>' +
                '<div class="detail detail-gross-rate">' + val.grossRate + '</div>' +
                '<div class="detail detail-aer">' + val.aer + '</div>' +
                '</div>';
        });
        html += '</div>' +
            '</div>';
        rates.products.append(
            html
        );
    });
}

Upvotes: 1

Related Questions