Превращение вложенного JSON в вложенный список HTML с помощью Javascript - PullRequest
Новая
       14

Превращение вложенного JSON в вложенный список HTML с помощью Javascript

5 голосов
/ 31 июля 2009

Я довольно новичок в использовании JSON (в отличие от XML) и в настоящее время работаю исключительно с Javascript для переваривания, анализа и отображения моих возвращенных данных JSON.

Я использую библиотеку JSON2.js и возвращаю некоторые допустимые данные JSON, представляющие довольно простой вложенный список: 

{
  "node":{
    "class":"folder",
    "title":"Test Framework",
    "node":{
      "class":"folder",
      "title":"Item 1",
      "node":{
        "class":"folder",
        "title":"Item 1.1",
        "node":{
          "class":"file",
          "title":"Item 1.1.a"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.2",
        "node":{
          "class":"file",
          "title":"Item 1.2.a"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.b"
        },
        "node":{
          "class":"file",
          "title":"Item 1.2.c"
        }
      },
      "node":{
        "class":"folder",
        "title":"Item 1.3",
        "node":{
          "class":"folder",
          "title":"Item 1.3.a",
          "node":{
            "class":"file",
            "title":"Item 1.3.a.i"
          },
          "node":{
            "class":"file",
            "title":"Item 1.3.a.ii"
          }
        }
      }
    },
    "node":{
      "class":"folder",
      "title":"Item 2",
      "node":{
        "class":"file",
        "title":"item 2.a"
      },
      "node":{
        "class":"file",
        "title":"Item 2.b"
      }
    }
  }
}

Есть ли у кого-нибудь указатели на быстрый способ превратить этот лот в UL со всеми вложенными элементами? Также было бы здорово, если бы элемент "class", который есть в JSON, мог использоваться как класс для каждого LI.

Любая помощь очень ценится.

Спасибо

Дэйв.

Ответы [ 3 ]

10 голосов
/ 31 июля 2009

Ваш JSON не подходит для вашей задачи. Некоторые объекты имеют несколько свойств с одинаковым именем («узел»), поэтому они переопределяют друг друга. Вместо этого вы должны использовать массивы узлов. Вот рабочая структура данных и функции, которые могут превратить ее во вложенный список: 

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
function parseNodes(nodes) { // takes a nodes array and turns it into a <ol>
    var ol = document.createElement("OL");
    for(var i=0; i<nodes.length; i++) {
        ol.appendChild(parseNode(nodes[i]));
    }
    return ol;
}

function parseNode(node) { // takes a node object and turns it into a <li>
    var li = document.createElement("LI");
    li.innerHTML = node.title;
    li.className = node.class;
    if(node.nodes) li.appendChild(parseNodes(node.nodes));
    return li;
}

window.jsonData = [{
    "class": "folder",
    "title": "Test Framework",
    "nodes": [{
        "class": "folder",
        "title": "Item 1",
        "nodes": [{
            "class": "folder",
            "title": "Item 1.1",
            "nodes": [{
                "class": "file",
                "title": "Item 1.1.a"
            }]
        },
        {
            "class": "folder",
            "title": "Item 1.2",
            "nodes": [{
                "class": "file",
                "title": "Item 1.2.a"
            },
            {
                "class": "file",
                "title": "Item 1.2.b"
            },
            {
                "class": "file",
                "title": "Item 1.2.c"
            }]
        },
        {
            "class": "folder",
            "title": "Item 1.3",
            "nodes": [{
                "class": "folder",
                "title": "Item 1.3.a",
                "nodes": [{
                    "class": "file",
                    "title": "Item 1.3.a.i"
                },
                {
                    "class": "file",
                    "title": "Item 1.3.a.ii"
                }]
            }]
        }]
    },
    {
        "class": "folder",
        "title": "Item 2",
        "nodes": [{
            "class": "file",
            "title": "item 2.a"
        },
        {
            "class": "file",
            "title": "Item 2.b"
        }]
    }]
}];

</script>
</head>
<body>
    <input type="button" 
    onclick="document.body.appendChild(parseNodes(jsonData))"
    value="go" />
</body>
</html>

И я могу добавить этот CSS, чтобы нумерация элементов соответствовала названиям узлов:) 

<style type="text/css">
ol { list-style-type: none }
ol ol { list-style-type: decimal }
ol ol ol { list-style-type: decimal }
ol ol ol ol { list-style-type: lower-alpha }
ol ol ol ol ol { list-style-type: lower-roman }
</style>

См. Это в действии.

1 голос
/ 31 июля 2009

Вот довольно простой код, который создает элемент <ul> для каждого объекта и элемент <li> для каждой части. Вы можете добавить быструю проверку для проверки переменной child на такие вещи, как "class", если вы хотите добавить особый случай. 

function jsonToHtmlList(json) {
    return objToHtmlList(JSON.parse(json));
}

function objToHtmlList(obj) {
    if (obj instanceof Array) {
        var ol = document.createElement('ol');
        for (var child in obj) {
            var li = document.createElement('li');
            li.appendChild(objToHtmlList(obj[child]));
            ol.appendChild(li);
        }
        return ol;
    }
    else if (obj instanceof Object && !(obj instanceof String)) {
        var ul = document.createElement('ul');
        for (var child in obj) {
            var li = document.createElement('li');
            li.appendChild(document.createTextNode(child + ": "));
            li.appendChild(objToHtmlList(obj[child]));
            ul.appendChild(li);
        }
        return ul;
    }
    else {
        return document.createTextNode(obj);
    }
}

Это не будет делать именно то, что вы хотите, потому что ваш JSON не имеет смысла. Объекты в JavaScript и, следовательно, JSON, являются картами, поэтому вы не можете иметь более одного дочернего элемента с одинаковым именем. Вам нужно будет превратить несколько ваших «узлов» в массив, как указывает Седрик.

0 голосов
/ 31 июля 2009

Вы можете самостоятельно пройтись по своей структуре json и при необходимости создать соответствующий <li>, но я предлагаю вам реализовать Composite Pattern. См. ссылка для получения более подробной информации

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...