Разобрать объект - поле -> div (или ul)
 

Есть большой объект, например

var user = {
  name: "Вася",
  age: 25,
  size: {
    top: 90,
    middle: 60,
    bottom: 90,
      size: {
         top: 90,
         middle: 60,
         bottom: 90,
            size: {
               top: 90,
               middle: 60,
               bottom: 90
                    }
              }
        }
}

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

<div>
    <div>name: "Вася"</div>
    <div>age: 25</div>
    <div>size:
        <div>top: 90</div>
        <div>middle: 60</div>
        <div>bottom: 90</div>
        <div>size:
            <div>top: 90</div>
            <div>middle: 60</div>
            <div>bottom: 90</div>
            <div>size:
                <div>top: 90</div>
                <div>middle: 60</div>
                <div>bottom: 90</div>
            </div>
        </div>
    </div>
</div>

Набросал код, но он возвращает последнее вложение объекта. В чем косяк?

Fx.Wrap = function (obj) {
    var out = "";
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop) && obj[prop] != undefined) {
            if (typeof obj[prop] == 'object') {
                out += this.Wrap(obj[prop]);
                continue;
            }
            out += '<div>' + prop + ': ' + obj[prop] + '</div>';
        }
    }
    return out;
};

Тут нужна рекурсия. Нужен специалист, или жди когда я дотямаю.

UPD. Fx.Wrap === this.Wrap ? То есть это она и есть, рекурсия?

Теоретически да) Но что то не получается она

Sherminator,

Fx.Wrap = function (obj) {
    var out = "";
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop) && obj[prop] != undefined) {
            var k = obj[prop];
            if (typeof k == 'object') {
                k = this.Wrap(k);
            }
            out += '<div>' + prop + ': ' + k + '</div>';
        }
    }
    return out;
};

рони, вы всего лишь создали отдельную переменную и положили туда объект, что заставило его работать... Можете объяснить в чем была проблема поподробнее?

нет ... с теорией у меня никак, только практика.

Ну хорошо.

Я один раз написал рендер деревянного меню говнокодом, год не лез в него, потом совершил подвиг, залез, переписал классово и больше не полезу. Недетерминированная это штука рендер деревьев. Все работает, а почему работает - хз. )))

может так понятнее?
без отдельной переменной

Fx.Wrap = function (obj) {
    var out = "";
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop) && obj[prop] != undefined) {
            out += '<div>' + prop + ': ' + (typeof obj[prop] == 'object' ? this.Wrap(obj[prop]) : obj[prop]) + '</div>';
        }
    }
    return out;
};

Понял свой косяк) Всем спасибо!