Question

我试图在我的aspx网站上以特定方式格式化JSON的输出： This fiddle大致显示了我正在尝试的内容。但是我想在顶部和底部div之间留出空间，每行最多有3个div。

我正在使用ListData.svc从Sharepoint检索列表。我的aspx文件如下所示：

<%@ Page CodeBehind="l2Content.aspx.cs" Language="C#" %>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!DOCTYPE html>

<script type="text/javascript">
$(document).ready(function () {
        $.ajax({
            url: "http://server:port" + "/Projects/1/_vti_bin/ListData.svc/Projectlist?$select=ID,Title,Project_typeValue,Project_heading,Publish_infoscreen&$filter=Project_typeValue%20eq%20%27TYPE1%27",
            method: "GET",
            dataType: "JSON",
            headers: { "accept": "application/json; odata=verbose" },
            success: function (data) {
                $('#projectList').empty();                   
                $.each(data.d.results, function(index, item) {                                                                    
                        $('#projectList').append("<li>" + "<h2>" +  item.Project_heading + "</h2>" + item.Title+ + "</li>");                      
                });             
            },
            error: function (error) {
                alert(JSON.stringify(error));
            }
        });   
});
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta name="WebPartPageExpansion" content="full" />
<title></title>
</head>
  <body>
    <form id="form1" runat="server">
       <div id="projectList"></div>
     </form>

  </body>
</html>

JSON输出：

    JSON
      d
        results
          {}
            ID=1
            Project_heading=Heading1
            Project_typeValue=TYPE1
            Publish_infoscreen=True
            Title=Testproject1

这是应该发生的事情：我正在检索一个项目列表 - 每个项目都有一个名为＆＃34; Project_heading＆＃34;附在它上面。我希望为每个唯一的Project_heading创建一个div，并在此下列出具有该特定项目标题的所有项目。

我以为我可以使用类似的东西：

success: function (data) {
            $('#projectList').empty();
            var projHeadings = [];
            $.each(data.d.results, function (index, item) {

                if ($.inArray(item.Project_heading, projHeadings) == -1) {
                    projHeadings.push(item.Project_heading);
                }

            for (var i = 0, l = projHeadings.length; i < l; i++) {
                var Pitem = projHeadings[i];
                $('#projectHeadingWrapper').append("<div><h1>" + Pitem + "</h1>    </div>");
            }
            });

正如您所知，我对此非常陌生，非常感谢任何帮助！

修改对不起解释不好，这里我构建了一些显示我想要的虚拟数据：

来自JSON的

：

{
"d" : {
"results": [
{
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(1)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "TestProject1", "Publish_infoscreen": true, "Project_typeValue": "TYPE1", "Project_heading": "Investments", "ID": 1
}, {
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(2)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "Testproject2", "Publish_infoscreen": false, "Project_typeValue": "TYPE1", "Project_heading": "Investments", "ID": 2
}, {
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(3)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "Project x1", "Publish_infoscreen": true, "Project_typeValue": "TYPE1", "Project_heading": "Sales", "ID": 3
}, {
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(4)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "Project x2", "Publish_infoscreen": true, "Project_typeValue": "TYPE1", "Project_heading": "Sales", "ID": 4
}, {
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(5)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "Project x3", "Publish_infoscreen": false, "Project_typeValue": "TYPE1", "Project_heading": "Sales", "ID": 5
}, {
"__metadata": {
"uri": "http://server:port/Projects/1/_vti_bin/ListData.svc/Projectlist(6)", "etag": "W/\"2\"", "type": "Microsoft.SharePoint.DataService.ProjectlistItem"
}, "Title": "Project y1", "Publish_infoscreen": true, "Project_typeValue": "TYPE1", "Project_heading": "Offers", "ID": 6
}
]
}
}

我希望在this fiddle

中看起来像

Answer 1

请尝试使用以下代码段。

<html>
<head>
    <title></title>
    <script src="Scripts/jquery-2.1.0.js" type="text/javascript"></script>
    <script type="text/javascript">
        var results = new Array();

        var test1 = new Object();
        test1.Title = "TestProject1";
        test1.Project_heading = "Investments";
        results.push(test1);

        var test2 = new Object();
        test2.Title = "TestProject2";
        test2.Project_heading = "Investments";
        results.push(test2);

        var test3 = new Object();
        test3.Title = "Project x1";
        test3.Project_heading = "Sales";
        results.push(test3);

        var test4 = new Object();
        test4.Title = "TestProject3";
        test4.Project_heading = "Investments";
        results.push(test4);

        $(document).ready(function () {
            $('.projectRow').empty();

            $.each(results, function (index, item) {
                var itemExist = false;
                $.each($('.projectRow').find('h1'), function (index1, item1) {
                    if (item1.innerHTML == item.Project_heading) {
                        itemExist = true;
                        $(item1).parent().append("<h3>" + item.Title + "</h3");
                    }
                });
                if (itemExist == false)
                    $('.projectRow').append("<div class='projectHeadingDiv left'><li><h1>" + item.Project_heading + "</h1><h3>" + item.Title + "</h3></li></div>");
            });
        });
    </script>
    <style type="text/css">
        .projectHeadingDiv
        {
            width: 900px;
            list-style: none;
            vertical-align: middle;
            background-color: gray;
            padding: 30px;
            text-align: center;
        }
        .left
        {
            margin-left: 20px;
            float: left;
            width: 200px;
        }
        .projectRow div
        {
            vertical-align: top;
            padding-top: 10px;
        }
    </style>
</head>
<body>
    <div class="projectHeadingWrapper">
        <div class="projectRow">
        </div>
    </div>
</body>
</html>

注意：仅替换＆＃34;结果＆＃34;用＆＃34; data.d.results＆＃34;在上面的代码段中。

以某种方式在aspx站点上显示JSON结果

1 个答案: