在GSP页

时间:2016-12-22 15:05:01

标签: javascript jquery json grails gsp

我正在尝试将JSON数据传递给GSP页面和显示表。

预期的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"]]

它会生成错误

3 个答案:

答案 0 :(得分:2)

虽然你已经有了它的工作,但我想也许你正在将你的数据操作到非标准方法中以获得结果。

我将尝试解释一种替代方法和一种可以在您的服务中使用的方法来构建您正在发送的地图,然后在控制器中呈现:

  

def resp = [data:[“System”,“One”,“Test”]]

你有什么:

//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查找生成的列表,在这种情况下resp.data只是成为列表

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改进为搜索结果。我做了一些json的东西和wschat插件。

上面没有对上面的任何内容进行测试,只是看看我的做法与你的风格相比,看起来不寻常,可能不符合任何标准,更难以建立更大的动态数据集

答案 1 :(得分:0)

[resp: resp]

更改为:

[resp: resp as JSON]

答案 2 :(得分: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>