Показать сообщение отдельно
  #1 (permalink)  
Старый 15.07.2015, 23:30
Аспирант
Отправить личное сообщение для Dtri Посмотреть профиль Найти все сообщения от Dtri
 
Регистрация: 14.12.2014
Сообщений: 86

построит список из объекта
Здравствуйте!
Есть вот такой объект.
jsonTree = {
        "firstName": "Иван",
        "lastName": "Иванов",
        "address": {
            "streetAddress": "Московское ш., 101, кв.101",
            "city": "Ленинград",
            "postalCode": 101101
        },
        "address2": [
            "Адрес",
            {
                "streetAddress2": "Московское ш., 101, кв.101",
                "city2": "Ленинград",
                "adress3": 101101
            }
        ],
        "phoneNumbers": [
            "812 123-1234",
            "916 123-4567"
        ]
    };


вложенность у этого объекта может быть неограниченная

Задача: Построить из него вот такой список (тоже не ограниченной вложенности).



<div class="tree">

   <ul>
            <li><input type="checkbox" name="firstName">Иван</li>
            <li><input type="checkbox" name="lastName">Иванов</li>
            <li><input type="checkbox" name="address">
                <ul>
                    <li><input type="checkbox" name="streetAddress">Московское ш., 101, кв.101</li>
                    <li><input type="checkbox" name="city">Ленинград</li>
                    <li><input type="checkbox" name="postalCode">101101</li>
                </ul>
            </li>
            <li><input type="checkbox" name="address2">Адрес
                <ul>
                    <li><input type="checkbox" name="streetAddress2">Московское ш., 101, кв.101</li>
                    <li><input type="checkbox" name="city2">Ленинград</li>
                    <li><input type="checkbox" name="postalCode2">101101</li>
                </ul>
            </li>
            <li><input type="checkbox" name="phoneNumbers">
                <ul>
                    <li>812 123-1234</li>
                    <li>812 123-1234</li>
                </ul>
            </li>
  </ul>

</div>


Начал вот с такого:
$('.tree').append('<ul></ul>');
    for (var key in jsonTree)   {
        x++;
        $('.tree ul').append('<li><input type="checkbox" name="'+key+'">'+jsonTree[key]+'</li>');

    }



Естественно этот вариант не отображает вложенность.
<ul>
        <li><input type="checkbox" name="firstName">Иван</li>
        <li><input type="checkbox" name="lastName">Иванов</li>
        <li><input type="checkbox" name="address">[object Object]</li>
        <li><input type="checkbox" name="address2">Адрес,[object Object]</li>
        <li><input type="checkbox" name="phoneNumbers">812 123-1234,916 123-4567</li>
    </ul>

Вот тут начинается самое сложное.
как сделать такой перебор чтобы по всем ключам проходил.
Хотя может не правильно мыслю.
Подскажите как реализовать эту задачу.

Подчёркиваю. объект с сервера может приходить неограниченной вложенности, соответственно и список рисоваться должен неограниченной вложенностью.

Последний раз редактировалось Dtri, 15.07.2015 в 23:35.
Ответить с цитированием