简体   繁体   English

在HTML表中显示JSON字符串数据

[英]Display JSON string Data in HTML Table

I get the following JSON String from server as response enter image description here Here is my Jquery Code 我从服务器获取以下JSON字符串作为响应, 此处输入图片描述,这是我的Jquery代码

function loadCategories() {
        $.ajax({
            type: "POST",
            url: "/Services/ControllerService.asmx/Get",
            data: {},
            cache: false,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var jsonArray = JSON.parse(result.d);

                alert(jsonArray);




            }, error: function (msg) {
                alert('Error : while executing the outlets : ' + msg.responseText);
            }
        });
    }

The alert shows the JSON String Correctly. 警报会正确显示JSON字符串。 Now i want to map this response to an html table showing columns "a" and "b" 现在,我想将此响应映射到显示列“ a”和“ b”的html表中

  a        -             b

hasOtherInfo Undergratuate_in_Computing_Faculty hasOtherInfo Undergratuate_in_Computing_Faculty

How can i do that ?? 我怎样才能做到这一点 ??

  1. loop through the JSON data. 遍历JSON数据。
  2. get the a and b value 获得a和b值
  3. write a function that takes care of splitting the value present in results.a.bindings.value & results.b.bindings.value based on the / and # 编写一个函数,该函数基于/和#来拆分results.a.bindings.value和results.b.bindings.value中的值。

  4. display the same in your html table 5(optional). 在html表5中显示相同的内容(可选)。 use a jquery table plugin to display your results for a feel good look 使用一个jQuery表格插件来显示您的结果,使您感觉良好

You have some plugin that can achieve that: 您可以使用一些插件来实现:

As inspecting from your json data you can do this: 在检查json数据时,您可以执行以下操作:

var tr="";
$.each(jsonArray.results.bindings, function(i,v)
    {
        var td="";
        $.each(v, function(r,s)
            {
                td+='<td>'+s.type+'</td>';
            });

        tr+= '<tr>'+td+'</tr>';

    });
$("yourTableName").find("tbody").html("").html(tr);

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM