Вставить данные json из файла в html

592

23 января 2017, 20:23

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

Answer 1

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

// 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/

Answer 2

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