Использование Jquery + Json для создания экземпляров? - PullRequest
1 голос
/ 05 января 2012

У меня есть файл JSONP, который извлекает данные о местах.

Для каждого объекта будет разделяться информация о каждом из них.

<div class="venue">
  <p class="name"></p>
  <p class="address"></p>
  <p class="phone"></p>
  <p class="tips"></p>
</div>

JS код:

$.ajax({
        dataType : 'jsonp',
        url      : 'comedy.json',
        jsonp : "callback",
        jsonpCallback: "comedyData",
        success  : function (data) {
            console.log(data);
            for (var i = 0, len = data.length; i < len; i++) {
            var address = data[i].address;
            $('.address').append(address);
                }
            }
        });
    });

Я вытаскиваю данные в массив, но мне нужно только заполнить каждое место только его информацией. Место 1 = имя, адрес, телефон ... и DIV для каждого места, где отображается эта информация.

Я пытаюсь найти способ сделать один DIV, который будет копировать себя с 30 мест из файла JSON? Таким образом, каждый div будет иметь свое имя места, адрес и т. Д., Но записывается только один раз и заполняется из файла JSONP.

Имеет ли это смысл?

Ответы [ 3 ]

1 голос
/ 05 января 2012

Я добавил контейнер для добавления всех мест:

<div id="venues" />

Создать шаблон в памяти:

for (var i = 0, len = data.length; i < len; i++) {
    var $div = $("<div class='venue'><p class='name' /><p class='address' /><p class='phone' /><p class='tips' /></div>");

    //set data
    $div.find(".name").html(data[i].name);
    $div.find(".address").html(data[i].address);
    $div.find(".phone").html(data[i].phone);
    $div.find(".tips").html(data[i].tips);

    //append to main container
    $("#venues").append($div);
}
1 голос
/ 05 января 2012

Если есть много мест, и производительность становится проблемой, вы можете подумать об использовании clone в конце концов, так как похоже, что оно будет работать лучше, чем мое решение в памяти, которое я опубликовал.

ВАРИАНТ 1


HTML-разметка

<div id="venues">
    <div class="venue" style="display:none;">
      <p class="name"></p>
      <p class="address"></p>
      <p class="phone"></p>
      <p class="tips"></p>
    </div>
</div>

jQuery Code

for (var i = 0, len = data.length; i < len; i++) {
    var $div = $(".venue:first").clone();

    //set data
    $div.find(".name").html(data[i].name);
    $div.find(".address").html(data[i].address);
    $div.find(".phone").html(data[i].phone);
    $div.find(".tips").html(data[i].tips);

    $div.removeAttr("style");

    //append to main container
    $("#venues").append($div);
}

Edit: Думал об этом немного больше, потому что там был довольно длинный список элементов, поэтому я создал версию JavaScript (не зависящую от библиотеки), которая должна повысить производительность

ВАРИАНТ 2


HTML-разметка

<div id="venues"></div>

JavaScript Нет библиотеки

var doc = document;

var fragment = doc.createDocumentFragment();

for (var i = 0, len = data.length; i < len; i++) {
    var div = doc.createElement("div");
    div.className += "venue";

    var name = doc.createElement("p");
    name.innerHTML = data[i].name;
    name.className += "name";

    var address = doc.createElement("p");
    address.innerHTML = data[i].address;
    address.className += "address";

    var phone = doc.createElement("p");
    phone.innerHTML = data[i].phone;
    phone.className += "phone";

    var tips = doc.createElement("p");
    tips.innerHTML = data[i].tips;
    tips.className += "tips";

    div.appendChild(name)
       .appendChild(address)
       .appendChild(phone)
       .appendChild(tips);

    fragment.appendChild(div);
}

doc.getElementById("venues").appendChild(fragment);
0 голосов
/ 05 января 2012

я думаю, что вы можете динамически создавать div и p в javascript, чтобы повторить результат из ваших данных json. например:

в html:

<div id = "venues"></div>

в JavaScript:

for (var i = 0, len = data.length; i < len; i++)
{
    var div = document.createElement("div");
    var p1 = document.createElement("p");
    $(p1).html(data[i].name);
    var p2 = document.createElement("p");
    $(p2).html(data[i].address);
    $(div).append(p1);
    $(div).append(p2);
    $("#venues").append(div);
}
...