Serejqa Serejqa - 1 month ago 15
jQuery Question

jQuery getJSON content in new div

Could some one help me. How to load my data in new divs
Iv got this one. All is going into one div

And how to make right that

Im just asking how to make : Divs should create automatically depending on json file ( amount of data)

my 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%"
}
]


script:

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


and 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

/*

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>

Comments