0

Как записать данные из json в динамически создаваемый div - книга контактов.

Json файл содержит несколько параметров - имя, почта, аватарка и др.
Как их по очереди записать в див для каждого контакта?

Вот примерный код:

<div id="contacts_list"></div>
var module_contacts_list = (function() {
  function ajax(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onreadystatechange = function() {

      //if (this.readyState == 4 && this.status == 200)
      if (this.readyState == 4) {
        if (this.status == 200)
          callback(JSON.parse(this.responseText));
      }
    };
    xhr.send(null);
  }

  ajax('http://demo.sibers.com/users', function(data) {

    var div_contact = document.createElement('div');
    div_contact.className = 'contact';

    var contact_name = data.map(function(el) {
      for (var i = 0; i < data.length; i++) {
        $('.contact').append(el.name);
      }
    });
    var contact_email = data.map(function(el) {
      for (var i = 0; i < data.length; i++) {
        $('.contact').append(el.email);
      }
    });

    document.getElementById('contacts_list').appendChild(div_contact);
    div_contact.appendChild(contact_name);
    div_contact.appendChild(contact_email);
  });
})();

1 ответ 1

1

$(function() {
   $.getJSON("http://demo.sibers.com/users", function(data) {
     var items = [];
     $.each(data, function(key, val) {
       var html = "";
       Object.keys(val).forEach(function(key) {
         if (typeof val[key] != "object") html += key + " : " + val[key] + "<br>"
       });
       items.push('<li id="' + key + '">' + html + "</li>")
     });
     $("<ul/>", {
       "class": "my-new-list",
       html: items.join("")
     }).appendTo("#contacts_list")
   })
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="contacts_list"></div>

примерно так, или добавить выборку только по нужным ключам, в примере нет обхода вложенных обьектов, но это не сложно добавить

2
  • а в решении таких задач нужно использовать childNodes ? т.е. это будет предпочтительней?
    – siberian
    26 янв 2016 в 12:02
  • @Marina Voronova childNodes? не понимаю о чём вы спросили
    – рони
    26 янв 2016 в 12:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

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