Question

我有一个名为data.json的JSON文件，如下所示：

{
  "item1": {
    "details": [
      {
        "data": "2015-06-11 11:30:00",
        "link": "http:/link.com"
      },
      {
        "data": "2015-06-10 11:30:00",
        "link": "http:/link.com"
      },
      {
        "data": "2015-06-09 11:30:00",
        "link": "http:/link.com"
      }
    ]
  },
  "item2": {
    "details": [
      {
        "data": "2015-06-11 11:30:00",
        "link": "http:/link.com"
      },
      {
        "data": "2015-06-10 11:30:00",
        "link": "http:/link.com"
      },
      {
        "data": "2015-06-09 11:30:00",
        "link": "http:/link.com"
      }
    ]
  }
}

我有一个HTML结构，我想在菜单中附加位置，这些位置将从＆＃34; item1＆＃34;和＆＃34; item2＆＃34;例如

<ul>
<li><a href="#" class="display_link">item1</a></li>
<li><a href="#" class="display_link">item2</a></li>
</ul>

然后点击其中一个附加链接后，我想触发一些将采取＆＃34;数据＆＃34;和＆＃34;链接＆＃34;并将它们附加到链接ID，例如：

<ul id="links">
    <li><span>Data: 2015-06-11 11:30:00</span><a href="http:/link.com">http:/link.com</a></li>          
</ul>

现在我所拥有的是加载数据表单.json文件并附加菜单链接的脚本，但是我不知道如何在点击菜单项后附加链接到页面：/

$( document ).ready(function() {    

    jQuery.ajax({
        url: "js/aa_dashboard.json",
        dataType:'json',
        success:function(response)
        {
            console.log(response); 
            var menu_items = [];
            for(var key in response) {
                 console.log(key); 
                 $('#menu_custom').append(
                    '<li><a class="display_link" href="#">'+key+'</a></li>'
                 );
            }
        }
    });
});

Answer 1

同样，如果您在＃menu_custom中添加了列表项，则可以在页面上保留一个空白div： -

<div id="item-details"></div>

或者，如果你没有dom的初始控制，那么你可以通过以下方式将它附加到你的身体： -

然后点击每个项目，您可以将项目内容的html设置为项目详细信息div。

$("#item-details").html(itemDetailHtml);

其中itemDetailHtml的创建方式与创建列表项html的方式类似。

Answer 2

＆＃13;

   data = {
      "item1": {
        "details": [
          {
            "data": "2015-06-11 11:30:00",
            "link": "http:/link.com"
          },
          {
            "data": "2015-06-10 11:30:00",
            "link": "http:/link.com"
          },
          {
            "data": "2015-06-09 11:30:00",
            "link": "http:/link.com"
          }
        ]
      },
      "item2": {
        "details": [
          {
            "data": "2015-06-11 11:30:00",
            "link": "http:/link.com"
          },
          {
            "data": "2015-06-10 11:30:00",
            "link": "http:/link.com"
          },
          {
            "data": "2015-06-09 11:30:00",
            "link": "http:/link.com"
          }
        ]
      }
    };

    $(function(){
      for(var key in data) {
        $('#menu_custom').append(
          '<li id="' + key + '"><a class="display_link" href="#" onclick="loadItemlinks(\'' + key + '\')">'+key+'</a></li>'
        );
      }
      
      
    });

function loadItemlinks(clickedItem){
        var links = "ul";
        for(var i = 0; i < data[clickedItem].details.length; i++){
          var currentLinkDetail = data[clickedItem].details[i];
          links += '<li><a href="' + currentLinkDetail.link + '">' + currentLinkDetail.data + '</a></li>';
        }
        links += "</ul>";
        $("#" + clickedItem).append(links);
      }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul id="menu_custom">

</ul>

＆＃13;

如何浏览并显示此JSON文件的所有数据？

2 个答案: