Question

您好我遇到JSON密钥问题。假设我有一个外部JSON文件，如

{
   "key 1":[
      {
         "linkName":"key name 1.1",
         "linkUrl":"key URL 1.1"
      },
      {
         "linkName":"key name 1.2",
         "linkUrl":"key URL 1.2"
      }
   ],
   "key 2":[
      {
         "linkName":"key name 2.1",
         "linkUrl":"key URL 2.1"
      }
   ],
   "key 3":[
      {
         "linkName":"key name 3.1",
         "linkUrl":"key URL 3.1"
      },
      {
         "linkName":"key name 3.2",
         "linkUrl":"key URL 3.2"
      }
   ]
}

另外，假设我有一个setInterval函数，数据应该按键加载，即在页面加载后，key 1是默认值，然后在一定时间key 2数据加载之后再次加载某些时间，key 3数据加载等。我正在尝试下面的脚本：

$.getJSON("demo.json",function(data){
   $.each(data,function(key,value){
     if(data.hasOwnProperty(key)){
       var total = new Array();
       for(var i=0; i<2; i++){
       total[i] = key;
       $("#topmost").append('<div>'+total+'</div>');
     }
   }
});
});

最顶层只是body/html中的div

<div id="topmost"></div>

请提供必要的协助。

Answer 1

好的，我解决了你的问题。这是你发给我的代码（部分粘贴）：

<script type="text/javascript">
    $(document).ready(function(){       
        $.getJSON("demonew2.json",function(data){
            $.each(data,function(key,value){
                $("#topmost").append('<div>'+key+'</div>');
                if(data.hasOwnProperty(key)){
                    //alert(key);
                    var total = new Array();
                    for(var i=0; i<4; i++){ // Here 4 should be something like counts of the keys, as in this json file it is 4
                        total[i] = key;
                        $("#topmost").append('<div>'+total+'</div>');

                        setInterval (function(){alert(key)},5000);
                        // I NEED THE DATA TO BE LOADED KEY BY KEY, SAY AFTER PAGE LOAD IT WILL DISPLAY THE VALUES OF key_1, THEN AFTER 5 SECONDS<br />
                        // IT SHOULD DISPLAY key_2 VALUES AND SO ON.
                    }
                }
            });
        });
    });
</script>

</head>

<body>

<div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>

</body>

您的代码中存在两个主要问题：

1）如果要在延迟后完成作业，则必须使用“setTimeout”而不是“setInterval”以给定的间隔重复作业。 2）对所有作业使用相同的延迟量将迫使它们几乎在同一时刻完成，因此你必须增加延迟量。

此外，将值直接传递给setTimeout或setInterval方法并不是一个好主意，因为它们启动一个新线程并且跨线程值注入可能存在异常行为，所以我更喜欢使用代理函数来避免这是最终的工作代码：

    <script type="text/javascript">

        $(document).ready(function () {

            $.getJSON("demonew2.json", function (data) {

                var delay = 0;

                $.each(data, function (key, value) {

                    delay += 5000;

                    showData(key, value, delay);
                });
            });
        });

        function showData(key, value, delay) {

            setTimeout(function () {

                $("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>');

            }, delay);
        }
    </script>
</head>
<body>
    <div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>

所以让我知道这是否解决了你的问题。玩得开心。 ;）

更新：我添加了完整的页面代码供您轻松使用，还更改了附加部分以使其具有淡入淡出效果并使其更有趣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>


    <script type="text/javascript">

        $(document).ready(function () {

            $.getJSON("demonew2.json", function (data) {

                var delay = 0;

                $.each(data, function (key, value) {

                    delay += 5000;

                    showData(key, value, delay);
                });
            });
        });

        function showData(key, value, delay) {

            setTimeout(function () {

                $("#topmost").fadeOut(function() {
                $("#topmost").append('<div>' + key + " = " + JSON.stringify(value) + '</div>').fadeIn();
            });

            }, delay);
        }
    </script>
</head>
<body>
    <div style="background:#ccc; border:2px solid #ccc; padding:10px;" id="topmost"></div>
</body>
</html>

在一定时间后按Key加载JSON数据

1 个答案: