Json数组结果格式和显示

Question

嗨，我有下面的方法来获取JSON数据

$("#Result").click(function () {
                    $.ajax({
                        type: "POST",
                        url: "SampleWebForm.aspx/FetchLibraryDetails",
                        data: "{}",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                         // Replace the div's content with the page method's return.
                            $("#Result").text(msg.resources.description.title);
                        }
                    });
                });

调用的JSON结果如下所示：

LibraryData{
    "resources": {
        "description": {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        },
        "items": [{
            "title": "Large-scale open innovation: open source vs. patent pools",
            "body": "Thierry Rayna (2010), 'Large-scale open innovation: open source vs. patent pools', International Journal of Technology Management, vol. 52, no. 3\/4, pp:477-0",
            "image": "http:\/\/www.testWebsite.com\/libraryservices\/covers\/?id=0140-6736",
            "link": "http:\/\/www.testWebsite.com\/libraryservices\/resource\/article:7477"
        },
        {
            "title": "Introduction to Library Services",
            "body": "A great introductory session that will explore the online library. You will know how to find information in your subject and be shown some key resources and services to help with your studies.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/97689"
        }]
    },
    "access": {
        "items": [{
            "title": "Large-scale open innovation: open source vs. patent pools",
            "body": "Thierry Rayna (2010), 'Large-scale open innovation: open source vs. patent pools', International Journal of Technology Management, vol. 52, no. 3\/4, pp:477-0",
            "image": "http:\/\/www.testWebsite.com\/libraryservices\/covers\/?id=0140-6736",
            "link": "http:\/\/www.testWebsite.com\/libraryservices\/resource\/article:7477"
        },
        {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }],
        "description": {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }
    },
    "search": {
        "items": [{
            "title": "Large-scale open innovation: open source vs. patent pools",
            "body": "Thierry Rayna (2010), 'Large-scale open innovation: open source vs. patent pools', International Journal of Technology Management, vol. 52, no. 3\/4, pp:477-0",
            "image": "http:\/\/www.testWebsite.com\/libraryservices\/covers\/?id=0140-6736",
            "link": "http:\/\/www.testWebsite.com\/libraryservices\/resource\/article:7477"
        },
        {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }],
        "description": {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }
    },
    "helpdesk": {
        "items": [{
            "title": "Large-scale open innovation: open source vs. patent pools",
            "body": "Thierry Rayna (2010), 'Large-scale open innovation: open source vs. patent pools', International Journal of Technology Management, vol. 52, no. 3\/4, pp:477-0",
            "image": "http:\/\/www.testWebsite.com\/libraryservices\/covers\/?id=0140-6736",
            "link": "http:\/\/www.testWebsite.com\/libraryservices\/resource\/article:7477"
        },
        {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }],
        "description": {
            "title": "Getting started with the online library",
            "body": "The online library contains amazing resources and can seem overwhelming. This guide gives a very basic introduction. Over your years of study with us you will learn a lot more about resources and how to find and manage them.",
            "image": "http:\/\/www.testWebsite.com\/library\/files\/library\/imagecache\/node_standard\/web-journal%20shelves.JPG",
            "link": "http:\/\/www.testWebsite.com\/library\/node\/91194"
        }
    }
}

我的问题

基本上，我正在将一组JSON数据(如上面所示)放在" data“对象上。

调试时，我可以在" data“对象中看到整个json数据，并可以使用”data.d“写入div标记。

但我希望将数据与JSON结果分开显示，如下所示

4 DIVs资源、访问、搜索和服务台。

在每一种情况下，我想显示相应的描述和项目(每个有标题，正文，图像和链接)。

Answer 1

您有几个不同的选项，您可以遍历json对象并手动滚动一些html来完成您想做的事情。

或者-一种更好的方法是使用一个库，它支持像Knockout或ar角这样的模板。

如果你所需要的只是模板，我会用类似于Knockout的东西

查看Note 2示例-使用带有命名模板的"foreach“选项

我个人喜欢角质，不过这对你的处境来说可能太过分了。

Answer 2

您可以对对象进行迭代，并使用属性或键-值对追加一些HTML元素，如：

for (var key in obj) {
  // do something

  if (obj.hasOwnProperty(key)) {
    // do somthing else
  }
}