2

Здравствуйте! Помогите пожалуйста разобраться в вопросе:
Беру 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>

4
  • какой результат должен быть
    – L. Vadim
    22 янв 2017 в 10:33
  • при получении данных, в новую таблицу записывались данные из json.
    – SilaevD
    22 янв 2017 в 10:35
  • Да, понять бы вопрос ;)) или в чем разобраться ?! 22 янв 2017 в 11:00
  • Понял, где недопонимание) поправил пост.
    – SilaevD
    22 янв 2017 в 11:08

2 ответа 2

3

Вот такой вариант:

// Propagate template.
(function(selector) {
  var template = document.querySelector(selector);
  var arrayDataProvider = getJsonAsArray();
  arrayDataProvider.forEach(function(element) {
    var templateClone = template.content.cloneNode(true);
    templateClone.querySelector('.name > span').textContent +=
      ' ' + element.name;
    templateClone.querySelector('.age > span').textContent +=
      ' ' + element.age;
    templateClone.querySelector('.email > span').textContent +=
      ' ' + element.email;
    templateClone.querySelector('.phone > span').textContent +=
      ' ' + element.phone;
    templateClone.querySelector('.address > span').textContent +=
      ' ' + element.address;
    document.body.appendChild(templateClone);
  });
})('#table-template');

function getJsonAsArray() {
  return JSON.parse(`[
    {
      "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"
    }
  ]`);
}
<template id="table-template">
  <hr>
  <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>
  <hr>
</template>

https://jsfiddle.net/5p4hn4py/

2
  • Спасибо за ответ! Но для меня это немного сложно буду разбираться. Ответ от L. Vadim для меня понятнее. Подскажите,а что не так в моём варианте, как я понимаю, цикл $.each должен по каждому проходу создать табличку клон и внести данные.
    – SilaevD
    22 янв 2017 в 12:11
  • Вот ваш правильный вариант: jsfiddle.net/nqckmbd4. 22 янв 2017 в 12:29
1
for(i=0; i < data.length; i++)
{
          document.getElementsByClassName('table-template')[0].innerHTML += '<div class="table-template table">'+
          '<div class="name"> <span>Имя: '+data[i]["name"]+'</span></div>' +
          '<div class="age"><span>Возраст: '+data[i]["age"]+'</span></div>' +
          '<div class="email"><span>E-mail: '+data[i]["email"]+'</span></div>' +
          '<div class="phone"><span>Телефон: '+data[i]["phone"]+'</span></div>' +
          '<div class="address"><span>Адрес: '+data[i]["address"]+'</span></div>' +
          '</div>';
}
2
  • Спасибо за ответ! Но подскажите, а что не так в моём примере, ведь там так же используется цикл?
    – SilaevD
    22 янв 2017 в 12:18
  • пожалуйста, ваш цикл бежал несколько раз и постоянно вписывал в одну ячейку все параметры.
    – L. Vadim
    22 янв 2017 в 12:22

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.