如何打印json对象数组?

I found a jquery function online that i then tweaked a little, but it takes a youtube channels feed data and turns it into a json object. It then stores data from the objects arrays. I need to store extra data that IS given, but I dont know how to display the data so I can see the data in its arrays. Im sure this sounds confusing and that is because I dont know about json objects or how to print out the data in jquery. Ive done it before in php with the print function I believe.

我在网上找到了一个jquery函数，然后稍微修改了一下，但它需要youtube频道提供数据并将其转换为json对象。然后它从对象数组中存储数据。我需要存储给定的额外数据，但我不知道如何显示数据，以便在数组中看到数据。我确信这听起来令人困惑，那是因为我不知道json对象，也不知道如何用jquery打印数据。我之前在php中用过打印函数。

This is the function mentioned:

这就是所提到的功能:

$j(function() {
    $j.getJSON('http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json-in-script&callback=?&max-results=1', function(data) {
        $j.each(data.feed.entry, function(i, item) {
            var updated = item.updated;
            var url = item['media$group']['media$content'][0]['url'];
            var thumb = item['media$group']['media$thumbnail'][0]['url'];
            var numViews = item['yt$statistics']['viewCount'];
            //var vidDescription = item[''][''];
            var width = 710; //only change this number
            var height = width*9/16;
            //...rest left out...

        });
    });
});

I want to print out the array to see how to grab the video description. I just dont know the path to it through the array. Is there a way in jquery to print out the arrays similar to how I was able to in php?

我想打印出数组，看看如何获取视频描述。我只是不知道通过数组的路径。在jquery中是否有一种方法可以打印出与php相似的数组?

7 个解决方案

#1

In Chrome or Firefox, Press F12, This will bring up the Inspector. Click on 'Console' to show the console window.

在Chrome或Firefox中，按F12，会弹出检查器。单击“控制台”显示控制台窗口。

Now in your javascript code, whatever variable or object you want to print or 'inspect'. Pass it into the console log method.

现在，在javascript代码中，无论您想要打印或“检查”的变量或对象。将其传递到控制台日志方法。

var your_array_variable = "a string variable";  
console.log(your_array_variable); //<-- This is what you want to do!

Now refresh the page and run the event or function that you are building.

现在刷新页面并运行正在构建的事件或函数。

Voila!... In your console window you should see >Object (If you print a Object).

瞧!…在控制台窗口中，您应该看到>对象(如果您打印一个对象)。

Or in the example above.. You would see a string variable in the console.

或者在上面的例子中。您将在控制台中看到一个字符串变量。

Click on the expand tree node, (>) to view the object/variables details.

单击展开树节点(>)查看对象/变量细节。

You can console.log almost anything!.. Its a great way to learn whats going on.

你可以控制台。日志几乎任何东西! . .这是了解情况的好方法。

You can also set 'breakpoints', but this is a whole other question!..

你也可以设置“断点”，但这是另一个问题!

I think what your looking for is:

我认为你想要的是:

console.log(data); // To show the JSON data received

console.log(数据);//显示接收到的JSON数据

---

Update
Try this, It worked for me, in console you will see 2 objects you can click on and inspect. The first is the data from the json request, the second is the item looped in the $.each. This worked for me, On click of anything with the id="get_json". This will make the request, and log the response to the console.

更新试试这个，它对我有用，在控制台你会看到两个你可以点击和检查的对象。第一个是来自json请求的数据，第二个是在$.each中循环的项。这对我来说是可行的，只要单击id="get_json"就可以了。这将发出请求，并将响应记录到控制台。

    $('#get_json').click(function(e){
        e.preventDefault();
        $(function() {
            var json_url = 'http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json-in-script&max-results=1&callback=?';
            $.getJSON(json_url, function(data) {
                console.log(data); // Here we log to our console
                $.each(data.feed.entry, function(i, item) {
                    console.log(item); // This is what you want i think
                    var updated = item.updated;
                    var url = item['media$group']['media$content'][0]['url'];
                    var thumb = item['media$group']['media$thumbnail'][0]['url'];
                    var numViews = item['yt$statistics']['viewCount'];
                    //var vidDescription = item[''][''];
                    var width = 710; //only change this number
                    var height = width*9/16;
                    //...rest left out...

                });
            }).success(function() { alert("success"); })
            // Errors are your friend!.. Use them..
              .error(function(jqXHR, textStatus, errorThrown) {
                        console.log("error " + textStatus);
                        console.log("error throw " + errorThrown);
                        console.log("incoming Text " + jqXHR.responseText);
                    }) // End of .error
              .complete(function() { alert("complete"); });
            });
        });

#2

If you use Firebug or other developer tools, you can console.log(data) and then inspect the JSON response in Firebug (or whatever inspection tool you're using). Then you can use that view to determine the "path" to access the video description that you want.

如果您使用Firebug或其他开发人员工具，您可以console.log(data)，然后在Firebug中检查JSON响应(或您正在使用的任何检查工具)。然后您可以使用该视图来确定访问您想要的视频描述的“路径”。

Good luck.

祝你好运。

#3

Do a console.log( yourarray ); You will be able to see the output in the browsers JavaScript console.

做一个控制台。日志(yourarray);您将能够在浏览器JavaScript控制台中看到输出。

#4

Why not look at the object using the inspector built into your browser? Chrome, Firefox, and newer versions of IE have inspectors that could help you without the need to write any code of your own.

为什么不使用内置在浏览器中的检查器来查看对象呢?Chrome、Firefox和更新版本的IE都有检查器，这些检查器可以帮助您不需要编写任何自己的代码。

#5

There is also the command console.dir( object ) which will specifically give you a better dump to explore using a tree-system in FireFox and Chrome.

还有命令控制台。dir(对象)，它将为您提供一个更好的转储文件，以便在FireFox和Chrome中使用树系统进行研究。

More information: https://developer.mozilla.org/en-US/docs/Web/API/console.dir

更多信息:https://developer.mozilla.org/en-US/docs/Web/API/console.dir。

#6

If you want to inspect the JSON that you are getting from third party before writing any of your code against it, go to http://jsonlint.com/ and enter the Url (plain without callback) and click Validate. It would validate and display the formatted JSON.

如果您想要检查从第三方获得的JSON，在编写任何代码之前，请访问http://jsonlint.com/并输入Url(不带回调的plain)并单击Validate。它将验证并显示格式化的JSON。

http://jsonlint.com/

http://jsonlint.com/

http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json&max-results=1

http://gdata.youtube.com/feeds/users/iCallOfDutyFILMS/uploads?orderby=published&alt=json&max-results=1

#7

If your browser or environment has the right JSON object (e.g. Firefox), you can use JSON.stringify(obj) to convert the object to a string and use however you wish.

如果您的浏览器或环境有正确的JSON对象(例如Firefox)，您可以使用JSON.stringify(obj)将对象转换为字符串，并按自己的意愿使用。