javascript - 循环遍历 JSON 并动态填充数据

Question

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

1. 首先我发出一个 Ajax 请求
2. 然后我循环访问数据并动态创建 HTML 标签

我为每个 JSON 对象创建一个带有“product-wrapper”类的 div 容器(在本例中为 2 个 div 产品包装器)。正如您在我的 JSON 数据示例中看到的，每个对象都有一个对象“详细信息”数组。

从我的第二个 foreach 循环中 - 如何在适当的“product-wrapper”div 中填充“details”的数据？

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