在 GSP 页面中传递 JSON答案

【问题标题】：pass JSON in GSP page在 GSP 页面中传递 JSON
【发布时间】：2017-05-08 06:04:22
【问题描述】：

我正在尝试将 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"]]

它会产生错误

【问题讨论】：

标签： javascript jquery json grails gsp

【解决方案1】：

虽然您已经开始使用它，但我认为您可能正在将您的数据处理成非标准方法，以便以一种全面的方式获得结果。

我将尝试解释另一种方法，以及一种可在您的服务中使用的方法来构建您发送的地图，然后在控制器中呈现：

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 或其他形式的数据库查找生成的列表，在这种情况下 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 到搜索结果。我用那个和 wschat 插件做了一些 json 的东西。

尚未测试上述任何一项，只是比较我的做法与您的风格，这种风格看起来不寻常，可能不符合任何标准，而且构建更大的动态数据集更难

【讨论】：

【解决方案2】：

[resp: resp]

改为：

[resp: resp as JSON]

【讨论】：

你的意思是 [resp: resp as JSON]？因为只有“resp as JSON”返回空页面而不是我的视图
是的。我忘了它是单片的。

【解决方案3】：

已解决：控制器：

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>

【讨论】：