Question

我正在尝试使用嵌套的子列表级别（实际上是4个以上的子级别）构建一个动态无序列表，我很难渲染我需要的实际标记，因此在稍后阶段我可以使其更具功能性，我在以下链接jsfiddle创建，html标记看起来像：

         <ul class="nav nav-sidebar">
          <li class="dropdown">
            <a href="#">theatre_name: Americas <i class="ion-chevron-down text-primary pull-right"></i></a>
            <ul class="">
              <li class="dropdown">
                <a href="#">location_name: USA</a>
                <ul class="">
                  <li>
                    <a href="#">Living in USA</a>
                    <ul class="">
                      <li><a href="#">123 John Doe</a></li>
                      <li><a href="#">534 John Doe</a></li>
                      <li><a href="#">9728 John Doe</a></li>
                      <li><a href="#">7668 John Doe</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">What to do in USA</a>
                    <ul>
                      <li><a href="#">Fishing</a></li>
                      <li><a href="#">Skiing</a></li>
                      <li><a href="#">Hicking</a></li>
                      <li><a href="#">Running</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Visiting in USA</a>
                    <ul>
                      <li><a href="#">By Car</a></li>
                      <li><a href="#">By Air</a></li>
                      <li><a href="#">By Boat</a></li>
                      <li><a href="#">Walking</a></li>
                    </ul>
                  </li>
                </ul>
              </li> <!-- /.dropdown -->
              <li class="dropdown">
                <a href="#">location_name: Mexico</a>
                <ul class="">
                  <li>
                    <a href="#">Living in Mexico</a>
                    <ul class="">
                      <li><a href="#">123 Juan Lopez</a></li>
                      <li><a href="#">534 Juan Lopez</a></li>
                      <li><a href="#">9728 Juan Lopez</a></li>
                      <li><a href="#">7668 Juan Lopez</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">What to do in Mexico</a>
                    <ul>
                      <li><a href="#">Fishing</a></li>
                      <li><a href="#">Skiing</a></li>
                      <li><a href="#">Hicking</a></li>
                      <li><a href="#">Running</a></li>
                    </ul>
                  </li>
                  <li>
                    <a href="#">Visiting in Mexico</a>
                    <ul>
                      <li><a href="#">Por Auto</a></li>
                      <li><a href="#">Por Avion</a></li>
                      <li><a href="#">Por Barco</a></li>
                      <li><a href="#">Caminando</a></li>
                    </ul>
                  </li>
                </ul>
              </li> <!-- /.dropdown -->
            </ul>
          </li> <!-- /.dropdown -->
      </ul> <!-- ul -->

渲染后，标记应如下图所示：

enter image description here

这是json数据。

{
            "user_id": "01010101",
            "user_name": "John Doe",
            "super_user": true,
            "theatre": {
                "theatre_name": "americas",
                "locations": [
                    {
                        "location_name": "USA",
                        "events": [
                            {
                                "event_name": "living in Palo Alto",
                                "people": [
                                    "123 John Doe",
                                    "534 John Doe",
                                    "9728 John Doe",
                                    "7668 John Doe"
                                ]
                            },
                            {
                                "event_name": "What to do in Palo Alto",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Palo Alto",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ],
                "theatre_name": "Europa",
                "locations": [
                    {
                        "location_name": "Spain",
                        "events": [
                            {
                                "event_name": "living in Barcelona",
                                "people": [
                                    "123 Juan Garza",
                                    "534 Juan Garza",
                                    "9728 Juan Garza",
                                    "7668 Juan Garza"
                                ]
                            },
                            {
                                "event_name": "What to do in Barcelona",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Barcelona",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ],
                "theatre_name": "Asia",
                "locations": [
                    {
                        "location_name": "China",
                        "events": [
                            {
                                "event_name": "living in Beijing",
                                "people": [
                                    "123 Wei Zhang",
                                    "534 Wei Zhang",
                                    "9728 Wei Zhang",
                                    "7668 Wei Zhang"
                                ]
                            },
                            {
                                "event_name": "What to do in Beijing",
                                "people": [
                                    "Fishing",
                                    "Skying",
                                    "Hiking",
                                    "Running"
                                ]
                            },
                            {
                                "event_name": "Visiting in Beijing",
                                "people": [
                                    "By Car",
                                    "By Air",
                                    "By Boat",
                                    "Walking"
                                ]
                            }
                        ]
                    }
                ]
            }
        }

这是我发现的一个JavaScript，但需要一些工作才能使其正常运行，如何循环浏览json对象，提取数据并生成所需的标记？

$(function(){
            $.getJSON('./JSON/latest.json', function(data) {
                var items = [];
                $.each(data, function(i, item) {
                items.push('<li><a href="' + link + '">' + pName + '</a><span class="vTitle">' + vTitle + '</span>' + shortDesc + '</li>');
                });
                $('#latestList').append( items.join('') );
            });
        });

Answer 1

这是你如何做到的，

 $(document).ready(function(){
    $("body").append(list_theatre(events.theatre));
})

function list_theatre(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">theatre_name: '+object.theatre_name+' <i class="ion-chevron-down text-primary pull-right"></i></a>');
        newLi.append(list_locations(object.locations));
        newUl.append(newLi);
    })
    return newUl;
}

function list_locations(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">location_name: '+object.location_name+'</a>');
        newLi.append(list_events(object.events));
        newUl.append(newLi);
    })
    return newUl;
}

function list_events(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    //console.log(jsonObject);
    $.each(jsonObject,function(index,object){
        var newLi = $("<li/>");
        newLi.append('<a href="#">'+object.event_name+'</a>');      
        newLi.append(list_people(object.people));
        newUl.append(newLi);
    })
    return newUl;
}

function list_people(jsonObject){
    var newUl = $("<ul/>");
    var newLi = $("<li/>");
    $.each(jsonObject,function(index,text){
        var newLi = $("<li/>");
        newLi.append('<a href="#">'+text+'</a>');
        newUl.append(newLi);
    })
    return newUl;
}

我不得不改变一下json。由于theatre是一个集合，因此它需要是array个json对象。

在这里找到完整的js和json：http://jsfiddle.net/satyagupta/vabnyzvv/1/

此外，您可以通过向其添加一些递归来稍微缩小代码。

使用jQuery从json动态无序列表呈现

1 个答案: