Json数组结果格式和显示

时间:2014-02-12 14:51:42

标签: arrays json format

您好我有以下获取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”对象中看到整个json数据,并可以使用“data.d”写入div标签

但是我希望与JSON结果分开显示数据Like

4 DIV资源,访问,搜索&服务支持。

在每个下面我想显示相应的描述和项目(每个都有标题,正文,图像和链接)。

2 个答案:

答案 0 :(得分:0)

你有几个不同的选项,你可以遍历json对象并手动滚动一些html来做你想做的事。

或 - 更好的方法是使用支持Knockout或Angular等模板的库

如果你需要的只是模板,我会选择像Knockout

这样的东西

Check out the Note 2 example - Using "foreach" option with named template

我个人喜欢Angular,但是对于你的情况来说可能有点过分

答案 1 :(得分:0)

你可以迭代你的对象,并附加一些带有属性或键值对的HTML元素,如:

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

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