javascript - 在 HTML 中包装 JSON 元素

Question

如果我这样做，我会在 firebug 中收到所有正确的数据

 $.getJSON("https://www.googleapis.com/customsearch/v1?key=AIzaSyDPuIrijE0IQ6330vMLN2p-L_4J6y_G60c&cx=013036536707430787589:_pqjad5hr1a&q=cars&alt=json&callback=?",
               {

               },
               function (recievedData) {
                   console.log(recievedData);
});

数据的结构是这样的（真的很长，所以我把它放在了小提琴中）

http://jsfiddle.net/tsDrv/

如果您想完整查看，请将其放入浏览器： https ://www.googleapis.com/customsearch/v1?key=AIzaSyDPuIrijE0IQ6330vMLN2p-L_4J6y_G60c&cx=013036536707430787589:_pqjad5hr1a&q=cars&alt=json

我想做的就是打开“物品”并将它们包裹起来

显示在页面上，所以我试试这个：

$.getJSON("https://www.googleapis.com/customsearch/v1?key=AIzaSyDPuIrijE0IQ6330vMLN2p-L_4J6y_G60c&cx=013036536707430787589:_pqjad5hr1a&q=cars&alt=json&callback=?",
               {

               },
               function (recievedData) {
                   $.each(recievedData, function (i, item) {
                       $('#theBody').append(
                           $(document.createElement('li')).text(item.items)
                       );
                   });
               });

Firebug 没有读取错误，但没有显示任何内容，我确实尝试了另一种方式并不断获取 [object Object] 如何深入访问 JSON 数组以在页面上显示它？

Answer 1

Since you want to append li elements, you should wrap it into ul elements. Since your json has deep structure, you should implement a recursive element builder function which calls itself till a leaf is met.

If your aim is finally to display the JSON content without styling, you should hav a pre element and set its text to JSON.stringify(yourJsonObject, null, "\t").

Answer 2

以下是代码。目前我已经使用 阅读片段item.snippet，类似地您可以阅读item.title,item.displayLink等item.formattedUrl。

$.getJSON("https://www.googleapis.com/customsearch/v1?key=AIzaSyDPuIrijE0IQ6330vMLN2p-L_4J6y_G60c&cx=013036536707430787589:_pqjad5hr1a&q=cars&alt=json&callback=?",
               function (recievedData) {
                //console.log(recievedData);
                   $.each(recievedData.items, function (i, item) {
                       $('#theBody').append(
                           $(document.createElement('li')).text(item.snippet)
                       );
                   });
               });

演示