Question

有人可以帮助我。如何在新div中加载我的数据 Iv got this one. All is going into one div

我只想问如何制作：Divs应根据json文件（数据量）自动创建

我的json：

[
{
"name":"wat1",
"number":"42306810738002982912",
"city":"mat1",
"amount":"50 000,00",
"currency":"qwe1",
"rate":"7,40%"
},
{
"name":"wat2",
"number":"42306840338002521455",
"city":"mat2",
"amount":"153,85",
"currency":"qwe2",
"rate":"2,85%"
 },
 {
"name":"wat3",
"number":"42307752138002500019",
"city":"mat3",
"amount":"1500,00",
"currency":"qwe3",
"rate":"0,01%"
 }
]

脚本：

$(document).ready(function(){
$.getJSON("accounts.json", function(data){
$.each(data, function(key, value){
$("name").append(value.name)
$("number").append(value.number)
$("city").append(value.city)
$("amount").appoend(value.amount)
$("currency").append(value.currency)
$("rate").append(value.rate);
});
});
});

和html：

        <div class="deposit-small-block first-block size-small-block tt" onclick="view('t1'); return false">
            <div class="button_block">
                <div class="div-for-button">
                    <input type="radio" name="on">
                </div>
            </div>
            <div class="deposit-form-block-name">
                <div class="deposit-form-block-name-first white-text"><name></name></div>
                <div class="deposit-form-block-name-second white-text"><number></number></div>
                <div class="deposit-form-block-name-third white-text"><city></city></div>
            </div>
            <div class="deposit-form-block-sum">
                <div class="deposit-form-block-sum-text white-text">
                    <amount></amount><br><currency></currency>
                </div>
            </div>
            <div class="deposit-form-block-perc">
                <div class="deposit-form-block-sum-text white-text"><rate></rate></div>
            </div>
        </div>

Answer 1

/*

var data = [
{
"name":"wat1",
"number":"42306810738002982912",
"city":"mat1",
"amount":"50 000,00",
"currency":"qwe1",
"rate":"7,40%"
},
{
"name":"wat2",
"number":"42306840338002521455",
"city":"mat2",
"amount":"153,85",
"currency":"qwe2",
"rate":"2,85%"
 },
 {
"name":"wat3",
"number":"42307752138002500019",
"city":"mat3",
"amount":"1500,00",
"currency":"qwe3",
"rate":"0,01%"
 }
];


*/
function buildRow(a,b,c,d,e,f){
return '<div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\
            <div class="button_block">\
                <div class="div-for-button">\
                    <input type="radio" name="on">\
                </div>\
            </div>\
            <div class="deposit-form-block-name">\
                <div class="deposit-form-block-name-first white-text"><name>'+a+'</name></div>\
                <div class="deposit-form-block-name-second white-text"><number>'+b+'</number></div>\
                <div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\
            </div>\
            <div class="deposit-form-block-sum">\
                <div class="deposit-form-block-sum-text white-text">\
                    <amount>'+d+'</amount><br><currency>'+e+'</currency>\
                </div>\
            </div>\
            <div class="deposit-form-block-perc">\
                <div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\
            </div>\
        </div>'
}

$(document).ready(function(){
$.getJSON("accounts.json", function(data){
data = JSON.parse(data);
$.each(data, function(key, value){
$("#main_list").append(
buildRow(value.name
,value.number
,value.city,value.amount,value.currency,value.rate)
);
});
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='main_list'>

</div>

新div中的jQuery getJSON内容

1 个答案: