Question

我尝试迭代JSON数据并使用jQuery动态填充内容。

首先我做一个Ajax请求
然后我遍历数据并动态创建HTML标记

我创建了一个div容器，其类为＆＃34; product-wrapper＆＃34;对于每个JSON对象（在本例中为2 divs product-wrapper）。正如您在我的JSON数据示例中所看到的，每个对象都有一个对象数组＆＃34;详细信息＆＃34;。

从我的第二个foreach循环 - 我如何填充＆＃34;详细信息＆＃34;在其适当的产品包装中＆＃34; 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"
            }
        ]
    }
]

Answer 1

要么不使用CSS类来附加你的东西，而是使用唯一的id，或者首先在一个步骤中生成整个HTML代码（包装器和详细信息），然后附加它。

// 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
        );
    });
}

循环访问JSON并动态填充数据

1 个答案: