VPF::собрать из json Html - Форум программистов

Valeriy1996

Дата 12.6.2015, 11:33 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 2
Регистрация: 12.6.2015

Репутация: нет
Всего: нет

Добрый день. Аяксом занимаюсь ниделю. Не могу допереть, как при помощи jqery собрать html.
То есть нужно чтоб , скрипт читал json видел например item jsona собирал HTML и вставлял даные из json в собраные dom елементы которые jqery собирает когда видит json.
ниже представлен json который я сделал , а чуть ниже html структура которая должна из него получиться.

{
"works-item":{

"item":{
"title":"Limited <br>для VAZ",
"image-data":"VAZ",
}

"item":{
"title":"Limited <br>в BAZ",
"image-data":"BAZ",
}

<div id="cases" class="c-works">
<h2 class="work-header" style="display: none;"></h2>
<div class="box_skvere">
<img data-url="worksVAZ" src="img/works/VAZ.jpg">
<h3>Limated <br>
для VAZ</h3>
</div>
<div class="box_skvere">
<img data-url="worksBAZ" src="img/works/BAZ.jpg">
<h3>Limited <br>
в BAZ</h3>
</div>
</div>

Тоесть грубо говоря в Html изначально ничего нет все собираеться после прочтения и парсинга jsona. И количество собраных дом елементов должно соотвецтвовать количеству , итемов в json.
Помогите розобраться пожалуйста , кто знает)
Спасибо)

MamedovFadil

Дата 17.6.2015, 01:12 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 4
Регистрация: 11.2.2012
Где: Kaluga

Репутация: нет
Всего: нет

Примерно как-то так:

Код


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>

    <script src="http://code.jquery.com/jquery-2.1.4.js"></script>
    <script src="main.js"></script>
</head>
<body>
    <div id="cases" class="c-works">
        <h2 class="work-header" style="display: none;"></h2>
        
        
    </div>
</body>
</html>

Код


$(function() {

    var data = { 
        "works-item": [{ 
                "title":"Limited <br>для VAZ", 
                "image-data":"VAZ", 
            }, { 
                "title":"Limited <br>в BAZ", 
                "image-data":"BAZ", 
            }
        ]
    };

    var items = data["works-item"];
    for(var i = 0; i < items.length; i++) {
        var currentItem = items[i];

        var $img = $("<img>")
            .attr("data-url", "works" + currentItem["image-data"])
            .attr("src", "img/works/" + currentItem["image-data"] + ".jpg");

        var $title = $("<h3>").html(currentItem["title"]);

        var $itemElement = $("<div>").addClass("box_skvere");
        $itemElement.append($img).append($title);

        $("#cases").append($itemElement);
    }

});

1 Пользователей читают эту тему (1 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »