代码之家  ›  专栏  ›  技术社区  ›  Mark Henry

通过jquery显示json变量

  •  2
  • Mark Henry  · 技术社区  · 15 年前

    我想显示json文件的一个变量(Date),但它不起作用。我做错什么了?

    <script type="text/javascript">
        $(document).ready(function()
       {
            $.getJSON("http://json-head.appspot.com/?url=http://www.trinum.com/ibox/chatel/images/photofull.jpg&callback=?", function(data)
             {
               $.each(data.headers, function(i,item)
               {
                  if(i < 2)
                  {
                     $("body").append("+item.Date+");
                  }
               });
    
             });        
        });
    
    </script>
    
    5 回复  |  直到 15 年前
        1
  •  4
  •   Glorfindel Doug L.    6 年前

    实际问题是JSON响应结构, headers 只是一个物体 $.each 函数时,您将遍历此对象成员( ),如果 用于存储多个对象,应使用数组表示法“ [] “在上面:

    {
        "status_code": 200, 
        "ok": true, 
        "headers": [{
            "Content-Length": "7068", 
            "Via": "HTTP\/1.1 GWA", 
            "X-Powered-By": "ASP.NET", 
            "Accept-Ranges": "bytes", 
            "X-Google-Cache-Control": "remote-fetch", 
            "Server": "Microsoft-IIS\/6.0", 
            "Last-Modified": "Tue, 06 Feb 2007 07:57:38 GMT", 
            "ETag": "\"8b5f5c78c449c71:2c6a\"", 
            "Cache-Control": "no-cache", 
            "Date": "Sun, 19 Jul 2009 05:51:42 GMT", 
            "Content-Type": "image\/jpeg"
        }]
    };
    

    每人$ 标题

    [ ( 左括号 ),以结尾 ] ( ),值之间用 , ( 逗号 ) :

    JSON Array Notation

    有关JSON语法和结构检查的更多信息 this site .

        2
  •  1
  •   elcuco    14 年前

    这是一个例子(来自 http://www.openjs.com/scripts/others

    /dump_function_php_print_r.php )
    /**
     * Function : dump()
     * Arguments: The data - array,hash(associative array),object
     *    The level - OPTIONAL
     * Returns  : The textual representation of the array.
     * This function was inspired by the print_r function of PHP.
     * This will accept some data as the argument and return a
     * text that will be a more readable version of the
     * array/hash/object that is given.
     * Docs: http://www.openjs.com/scripts/others/dump_function_php_print_r.php
     */
    function dump(arr,level) {
        var dumped_text = "";
        if(!level) level = 0;
    
        //The padding given at the beginning of the line.
        var level_padding = "";
        for(var j=0;j<level+1;j++) level_padding += "    ";
    
        if(typeof(arr) == 'object') { //Array/Hashes/Objects 
            for(var item in arr) {
                var value = arr[item];
    
                if(typeof(value) == 'object') { //If it is an array,
                    dumped_text += level_padding + "'" + item + "' ...\n";
                    dumped_text += dump(value,level+1);
                } else {
                    dumped_text += level_padding + "'" + item + "' => \"" + value + "\"\n";
                }
            }
        } else { //Stings/Chars/Numbers etc.
            dumped_text = "===>"+arr+"<===("+typeof(arr)+")";
        }
        return dumped_text;
    }
    
        3
  •  0
  •   Sorantis    15 年前

        4
  •  0
  •   Craig McQueen    15 年前

    $.getJSON按url、data和callback的顺序接受3个参数。所以在这种情况下,你应该:

    $(document).ready(function(){
     $.getJSON("http://json-head.appspot.com/?url=http://www.trinum.com/ibox/chatel/images/photofull.jpg&callback=?", null, function(data){
      $.each(data.headers, function(i,item){
       if(i < 2){
        $("body").append("+item.Date+");
       }
      });
    });
    });
    
        5
  •  0
  •   nightingale2k1    15 年前

    所以你需要这样转换:

    var yourDate = new Date(item.Date);
    

    完整代码:

    <script type="text/javascript">
        $(document).ready(function()
       {
            $.getJSON("http://json-head.appspot.com/?url=http://www.trinum.com/ibox/chatel/images/photofull.jpg&callback=?", function(data)
             {
               $.each(data.headers, function(i,item)
               {
                  if(i < 2)
                  {
                     $("body").append(new Date(item.Date));
                  }
               });
    
             });        
        });
    
    </script>