2016-12-22 30 views
2

我试图传递JSON数据到GSP页面并显示表格。在GSP页面传递JSON

预期JSON:

{ 
    "data": [ 
    [ 
     "Tiger Nixon", 
     "System Architect", 
     "Edinburgh" 
    ] 
]} 

我试图用使它:

def resp = [data:["System", "One", "Test"]] 

[resp: resp] 

,并显示:

<g:javascript> 
    $(document).ready(function() { 
    $('#example').DataTable({ 
    "ajax": "${raw(resp)}" 
    }); }); 
</g:javascript> 

,反而会导致页面的源代码是:

$(document).ready(function() { 
    $('#example').DataTable({ 
     "ajax": "\u007bdata=\u005bSystem\u002c One\u002c Test\u005d\u007d" 
    }); 

如何正确传递它?

UPD1:

当我传递一个字符串它的工作原理:

查看:

<g:javascript> 
     var str = '${raw(resp)}'; 
     var json = JSON.parse(str); 
     $(document).ready(function() { 
     $('#example').DataTable({ 
      data: json 
     }); 
    }); 
    </g:javascript> 

控制器:

def resp = '[[ \"Tiger Nixon\", \"System Architect\", \"Edinburgh\"]]'  
respond resp, model:[resp: resp] 

网页源代码:

<script type="text/javascript"> 

    var str = '[[ "Tiger Nixon", "System Architect", "Edinburgh"]]'; 
    var json = JSON.parse(str); 
    $(document).ready(function() { 
    $('#example').DataTable({ 
     data: json 
    }); 
}); 

但是,当我试图通过

def resp = [["Tiger Nixon", "System Architect", "Edinburgh"]] 

它会产生一个错误

回答

2

虽然你已完成了工作,我想也许你操纵你的数据转化为非标准方法得到的结果绕路而行。

我会尽量解释的另一种方式,并且可以在服务中可以用于构建要发送,然后只是呈现在控制地图的方式:

高清RESP = [数据:[”系统”,‘一’,‘测试’]]

你有什么是:

//A groovy map object 
Map resp = [:] 
//It has one element called data which contains a list 
resp.data=[] 
//add in system 
resp.data << 'system' 
resp.data << 'One' 
resp.data << 'Test' 

这可能已经被一些findBy或DB升其他形式生成的列表ookup在这种情况下响应。数据只是变成列表

def myList=['system','one','Test'] 
resp.data=myList 

现在我们必须回到我们的对象,你有它

def resp = [data:["System", "One", "Test"]] 
or 
Map resp = [data:["System", "One", "Test"]] 

如果你现在要做的

String myResp = (resp as JSON).toString() 

您正在使用groov作为JSON先转换是映射到JSON并最终将JSON对象转换为字符串

您可以在服务中拥有一个函数它将JSON或完成的String对象返回给控制器直接动态构建数据。

我只给我的两分钱,因为看:

def obj = [["Tiger Nixon", "System Architect", "Edinburgh"]] 

好像你正在构建正好符合您java script which I think could possibly do with improvement直接与指定的地图来工作,而不是这个奇怪的物体一些奇怪的地图:

<g:javascript> 
    var str = '${raw(resp)}'; 
    var jsonData = JSON.parse(str); 
var jsonResult = jsonData.data; 
    $(document).ready(function() { 
    $('#example').DataTable({ 
     data: jsonResult 
    }); 
}); 
</g:javascript> 

我现在认为jsonResult只会持有您正在查看的对象。我提供了一个链接,可以将我的插件中的javascript改善为搜索结果。我用这个和wschat插件做了一些json的东西。

没有测试任何上述只是要什么我怎么做的VS你的风格,看起来不寻常的和可能的非comforming任何标准,并着手建立更大的动态数据更难方式,设立

0
[resp: resp] 

变化:

[resp: resp as JSON] 
+0

你的意思[resp:resp as JSON]?因为只有“resp as JSON”返回空白页面而不是我的视图 – ziftech

+0

是。我忘了它是单片的。 –

0

解决: 控制器:

def obj = [["Tiger Nixon", "System Architect", "Edinburgh"]] 
String resp = obj.encodeAsJSON(); 
respond resp, model:[resp: resp] 

encodeAsJSON()生成“”右输出

查看:

<g:javascript> 
    var str = '${raw(resp)}'; 
    var json = JSON.parse(str); 

    $(document).ready(function() { 
    $('#example').DataTable({ 
     data: json 
    }); 
}); 
</g:javascript>