Вывести в цикле json ответ

Question

Вывести в цикле json ответ

Рейтинг: 0Ответов: 2Опубликовано: 09.06.2011

Сервер выдает ответ такого типа:

[{"date":"Some Data 1","title":"Title1","path":"Link 1","image":"Image 1"},
{"date":"Some Data 2","title":"Title2","path":"Link 2","image":"Image 2"},
{"date":"Some Data 3","title":"Title3","path":"Link 3","image":"Image 3"},
{"date":"Some Data 4","title":"Title4","path":"Link 4","image":"Image 4"}]

Каждый массив это отдельный блок с превью новости, нужно вывести циклом (от 4 и более штук)

Вот код для одного блока превью:

$.getJSON('file.php' ,  
                     function(data) {

                          var box = $("<div class='origin-article-box'></div>").appendTo(originContent); //див с превью помещается в подготовленный контейнер на сайте
                          var img = $("<img class='foto-box' alt='' />").attr('src',data.image).appendTo(box); // создается картинка в атрибут записывается ссылка
                          var content = $("<div class='origin-article-content'></div>").appendTo(box); // создается див контейнер для заголовка и даты
                          var link = $('<a class="article-header"></a>').attr('href',data.path).text(data.title).appendTo(content); // создается ссылка на статью
                          var date =$('<span class="article-date"></span>').text(data.date).appendTo(content);  // создается спан для вывода даты

                      });

В итоге должна получиться такая разметка:

<div class="origin-article-box">
                <img class="foto-box" src=" data.image " alt="" />
                <div class="origin-article-content">
                    <a href=" data.path " class="article-header"> data.title </a>
                    <span class="article-date"> data.date </span>
                </div>
            </div>

Как обработать все 4 присланные сервером массивы и сформировать 4 блока с такой структурой? Может кто подскажет как можно оптимизировать js код, чтоб было меньше обрашений к dom.

javascript html jquery xhtml

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Ну и в чем проблема с циклом?

$.getJSON('file.php', function(data) {
for (var i = 0; i < data.length; i++) {
/*
Доступны:
data[i].date
data[i].title
data[i].path
data[i].image
*/
}
}

Answer 2

▲ 2

Раз уж вы пользуетесь jQuery и исходные данные - JSON, то я бы предложил воспользоваться плагином Templates, разработчиком которого является Microsoft.

<script id="origin-article" type="text/x-jquery-tmpl">
    <div class="origin-article-box">
        <img class="foto-box" src="${image}" alt="" />
        <div class="origin-article-content">
            <a href="${path}" class="article-header"> ${title} </a>
            <span class="article-date"> ${date} </span>
        </div>
    </div>
</script>

Тогда скрипт упростился бы до:

$.getJSON('file.php', function(data) {
    $("#origin-article").tmpl(data).appendTo(content);
});

При этом обращение к DOM будет минимальным. Если же шаблон используется в коде многократно, то его можно предварительно скомпилировать.

Вывести в цикле json ответ

Ответы