如何在表中明智地表示JSON响应

时间:2016-07-10 06:50:53

标签: javascript jquery json

我使用以下代码接收json作为响应并在表中表示它们。

$(document).ready(function() {
        var settings = {
            "async" : true,
            "crossDomain" : true,
            "url" : "Parse",
            "method" : "GET",
            "headers" : {
                "content-type" : "application/json"
            },
            "processData" : false
        }

        $.ajax(settings).done(function(jsnData) {

            var obj = JSON.parse(jsnData);
            for (var i = 0, len = obj.length; i < len; i++) {
                var j=0;
                var trd="";
                trd +="<tr>";
                trd+="<td>"
                + obj[i].word
                trd+= " </td>";
                trd+="<td>"
                + "<select class='input-small'><option value=''>"+obj[i].senses+"</option></select>";//obj[i].senses
                trd+= " </td>";
                trd+="</tr>";


                $('#userdata tr:last').after(trd);
            }

        });
    });
    </script>

userdata是我用来提供这个json响应的表的id。

Json格式是

[
{
"word": "play",
"senses": ["n1","n2","n3"]
},


 {
"word": "play1",
"senses": ["m1","m2","m3"]

} , { "word": "play2", "senses": ["j1","k2","l3"] }, { "word": "play3", "senses": ["x","ny","z"] }, { "word": "play4", "senses": ["p","q","r"] } ]

在我的表中有两列,一个用于单词,一个用于感官,但我想将感官列作为下拉列表。我得到的输出如下, enter image description here

正如您所看到的,我想用来表示感官的Option列,在一行中显示受尊重单词的感官,例如。对于单词play,它的感官显示为n1,n2,n3。我希望它们显示为下拉,即。对于单词play,单词n1 n2 and n3的下拉值为play1,下拉值为m1 m2 and m3

HTML代码

    <table id="userdata" border="2">
        <tr>
            <td><b>Word</b></td>
            <td><b>Options</b></td>
        </tr>
        <tbody>

        </tbody>
    </table>

我努力了但是没能按照预期的方式去做。非常感谢你的帮助。

1 个答案:

答案 0 :(得分:2)

使用此

 + "<select class='input-small'>";
 for(var k=0; i <obj[i].senses.length;k++){
  trd+="<option value='"+obj[i].senses[k]+"'>"+obj[i].senses[k]+"</option>";
 }
trd+="</select>";