[ Поиск ] - [ Пользователи ] - [ Календарь ]
Полная Версия: Парсер JS-объекта
redreem
Частенько пользую собственные js-дебаггеры, порой наляпанные на коленке, на скорую руку.
Хочу поделиться одним из них, - в случае, когда непонятно что творится в объекте, какие у него есть свойства и данные - очень удобно его распарсить по-полной и воочию увидеть что к чему.
Я в курсе, что в браузреных отладчиках можно инспектировать объект, но быват что просто в лом лезть в отладчик, а надо побыстрому видеть, например, что приехало из аджакса в джсоне, не тратя время на запуск отладчика и поиск нужного нода.

Я юзаю такую штуку как парсер объекта. Тупо бегу рекурсивно по всем его нодам и вывожу содержимое.

Самое смешное, что разные версии парсера оседают в разных проектах мертвым кодом, я не могу вспомнить где был последний релиз и пишу снова :) этот уже 5-й наверно :)

Ну впрочем, кто способен - тот заценит. В примере парсер распарсивает нод DOM'а c ID = 'test'.
Поскольку DOM - структура замудреная, часто в узле идет ссылка на другой объект, который парсер подхватывает и начинает распарсивать себе втихушку. Я вот кстати не придумал как это закостылить, что бы он не прыгал по таким ссылкам. Сейчас есть тупо контроль максимального погружения maxDepth.

в общем вот, надеюсь кому-нибудь пригодится:

<style>
.object_parser {position:relative;display:block}
.object_parser ul {margin-left:40px}
</style>

<body>
<div
id="test">тест</div>
</body>

<script>


octoDebug = {
maxDepth:4,
parse_object:function(obj,level) {
if (typeof level != 'undefined') {
if (level > this.maxDepth) {
return '<b style="color:red">-- depth overflow ... </b>';
}
}
else {
var level = 1;
}
var res = '<ul class="object_parser">';
for (var i in obj) {
var t = typeof obj[i];
switch (t.toLowerCase()) {
case 'object':
var d = ' { ' + this.parse_object(obj[i],level+1) + ' } ';
break;
case 'function':
var d = '<b style="color:blue"> -- function ... </b>';
break;
case 'string':
case 'number':
case 'boolean':
var d = obj[i];
break;
case 'undefined':
var d = t;
break;
default:
alert('Забей этот тип в свитч: ' + t);
var d = obj[i].toString();
break;
}
res += '<li>' + i + ': ' + d + ' </li>';
}
res += '</ul>'
return res;
}
}


var el = document.getElementById('test');
el.innerHTML = octoDebug.parse_object( el );

</script>


Быстрый ответ:

 Графические смайлики |  Показывать подпись
Здесь расположена полная версия этой страницы.
Invision Power Board © 2001-2024 Invision Power Services, Inc.