Всем спасибо за участие. Приношу извинения за столь долгий ответ.
Пересмотрел ваши варианты. Вы очень помогли идеей с рекурсией. Многое подчеркнул из примера
рони
Но решил воспользоваться более стандартным циклом. и немного перебрал алгоритм, так как вариант автора не предполагал не ограниченной вложенности. В условии (
"string" === $.type(b[a]) || "number" === $.type(b[a]) ? c.append(b[a]) : "address2" === a ? c.append(b[a][0]).append(fn(b[a][1])) : c.append(fn(b[a]));
) приходилось бы дописывать лишние параметры при дальнейшем увеличении вложенных пунктов списка. а задача заключалась именно в создании универсального плагина.
Вот например данная вложенность как показано ниже у автора вызывала артефакты.
Вот что получилось в итоге:
Что касается рекурсии. всё понятно. Но хотелось бы методом итерации. Может кто-нибудь подскажет способ?
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</head>
<body>
<div class="tree"></div>
<script>$(document).ready(function () {
var jsonTree = {
"firstName": "Иван",
"lastName": "Иванов",
"address1": {
"streetAddress1": "streetAddress1",
"city1": "city1",
"postalCode1": {
"streetAddress1": "streetAddress1",
"city1": "city1",
"postalCode1": {
"streetAddress1": "streetAddress1",
"city1": "city1",
"postalCode1": 'postalCode1'
}
}
},
"address2": [
"Адрес",
{
"streetAddress2": "streetAddress2",
"city2": "city2",
"postalCode2": [
"postalCode2",
{
"streetAddress2": "streetAddress2",
"city2": "city2",
"postalCode2": [
"postalCode2",
{
"streetAddress2": "streetAddress2",
"city2": "city2",
"postalCode2": [
"postalCode2",
{
"streetAddress2": "streetAddress2",
"city2": "city2",
"postalCode2": [
"postalCode2",
{
"streetAddress2": "streetAddress2",
"city2": "city2",
"postalCode2": 'postalCode2'
}
]
}
]
}
]
}
]
}
],
"phoneNumbers": [
"812 123-1234",
"812 123-1234"
]
};
//$('.tree').append(JSONtree(jsonTree));
(function ($) {
function JSONtree(obj) {
var
ul = $('<ul/>');
for (var key in obj) {
var
li = $('<li/>'),
input = $('<input/>', {
type: "checkbox",
name: key
});
if ($.type(obj[key]) == 'string' || $.type(obj[key]) == 'number') {
li.append(input).append(obj[key]);
ul.append(li);
}
if ($.type(obj[key]) == 'array' && $.type(obj[key][1]) !== 'object') {
li.append(input).append('Без названия').append(JSONtree(obj[key]));
ul.append(li);
}
if ($.type(obj[key]) == 'array' && $.type(obj[key][1]) == 'object') {
li.append(input).append(obj[key][0]).append(JSONtree(obj[key][1]));
ul.append(li);
}
if ($.type(obj[key]) == 'object') {
li.append(input).append('Без названия').append(JSONtree(obj[key]));
ul.append(li);
}
}
return ul;
}
$.fn.JSONtreeAppend = function (obj) {
return this.append(JSONtree(obj));
}
})(jQuery);
$('.tree').JSONtreeAppend(jsonTree);
});</script>
</body>
</html>