Здравствуйте!
Помогите пожалуйста разобраться в вопросе:
Беру json данные из внешнего файла и пытаюсь вставить в предназначенные для них элементы.
Но у меня получается, что в div.name записываются все полученные name, div.age записываются все полученные age и т.д.
Например: Имя: ИванЕкатеринаФедорСтаниславЕвгенийЕлена
Как сделать чтоб каждого прохода $.each, создавалась своя таблица со значениями.
Содержание json:
[
{
"name": "Иван",
"age": "32",
"email": "ivan@ivanov.ru",
"phone": "+7(954)148-45-73",
"address": "Торфяная ул. 7/4"
},
{
"name": "Екатерина",
"age": "24",
"email": "katja@yandex.ru",
"phone": "+7(956)172-12-23",
"address": "Никитинская ул. 12б"
},
{
"name": "Федор",
"age": "45",
"email": "fedor@sidirov.ru",
"phone": "+7(911)760-45-35",
"address": "Ленинский пр-т. 74/3"
},
{
"name": "Станислав",
"age": "19",
"email": "stas@fedorov.ru",
"phone": "+7(954)343-55-55",
"address": "Московский пр-т. 14/4"
},
{
"name": "Евгений",
"age": "28",
"email": "evgeny@gmail.com",
"phone": "+7(918)577-98-89",
"address": "Советская ул. 60"
},
{
"name": "Елена",
"age": "22",
"email": "elena@mail.ru",
"phone": "+7(931)466-77-19",
"address": "Есенина ул. 4"
}
]
Спасибо!
$.getJSON('test.json', function(data){
console.log(data);
$.each(data, function(key, val){
var name = val.name;
var age = val.age;
var email = val.email;
var phone = val.phone;
var address = val.address;
$('.table-template').clone().appendTo('body');
$('.table-template').find($('.name')).append('<span>' + name + '</span>');
$('.table-template').find($('.age')).append('<span>' + age + '</span>');
$('.table-template').find($('.email')).append('<span>' + email + '</span>');
$('.table-template').find($('.phone')).append('<span>' + phone + '</span>');
$('.table-template').find($('.address')).append('<span>' + address + '</span>');
});
});
.table div {
display: inline-block;
width: 200px;
border: 1px solid black;
margin: 10px;
padding: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-template table">
<div class="name">
<span>Имя:</span>
</div>
<div class="age">
<span>Возраст:</span>
</div>
<div class="email">
<span>E-mail:</span>
</div>
<div class="phone">
<span>Телефон:</span>
</div>
<div class="address">
<span>Адрес:</span>
</div>
</div>