使用 ajax 导入时如何访问较低级别的变量并连接它们答案

【问题标题】：How do I access lower level variables and concat them when importing with ajax使用 ajax 导入时如何访问较低级别的变量并连接它们
【发布时间】：2021-08-26 23:19:49
【问题描述】：

我正在查看以下 json 文件：

 "data": [
        {
            "Date": "2021-01-29",
            "Rating": 1018.81,
            "League_points": "TBD",
            "Team": {
                "Team": "Columbus Blue Jackets",
                "modification": "+-diff",
                "Logo": "<img src='img/NHLpics/columbusBlueJackets.gif' style='height:40%; width:40%'>"
            },
            "Division": "Metropolitan",
            "President's Trophy": "TBD",
            "Playoff Qualifier": "TBD",
            "Conference Winner": "TBD",
            "Stanley Cup": "TBD"
        },
        {
            "Date": "2021-01-29",
            "Rating": 976.12,
            "League_points": "TBD",
            "Team": {
                "Team": "Chicago Blackhawks",
                "modification": "+-diff",
                "Logo": "<img src='img/NHLpics/chicagoBlackhawks.gif' style='height:40%; width:40%'>"
            },
            "Division": "Central",
            "President's Trophy": "TBD",
            "Playoff Qualifier": "TBD",
            "Conference Winner": "TBD",
            "Stanley Cup": "TBD"
        },

并尝试使用以下函数将其导入 HTML 表格：

function getStandings(){
    var date = document.getElementById("standingsDate");
    var path = "data/NHL/DataForNHL_" + date.value + ".json";
    
    $(document).ready(function() {
    var table = $('#example').DataTable( {
        paging: false,
        destroy: true,
        "ajax": path,
        "columns": [
            { "data": "Rating" },
            { "data": "League_points" },
            { "data": "Team.Logo"},
            { "data": "Division" },
            { "data": "President's Trophy" },
            { "data": "Playoff Qualifier" },
            { "data": "Conference Winner" },
            { "data": "Stanley Cup" }
        ]
    } );
    
    setTimeout(myFunction, 100)
    

    obj = document.getElementById("example_filter");
    obj.remove();
} );

}

我面临的问题是，我不想只导入 Team.Logo，而是想导入它，以便在列的同一个表格单元格中显示 Team.Logo、Team.modification 和 Team.Team。谁能告诉我这是否可行？

如果需要更多信息，请告诉我，提前致谢！

【问题讨论】：

使用列渲染回调。它公开了行数据，并允许您为该特定列构建所需的内容
您可以在此处查看一些示例：columns.render()。具体来说，在“转换数据”示例中，查看render: function ( data, type, row ) { ... }。如果您将列数据定义为{ "data": "Team"}，则函数的data 变量可让您访问要组合到一个表格单元格中的3 个值。
@andrewjames 看起来正是我想要的。但是当我尝试集成该功能时，它只是说意外的令牌。我不确定在哪里放置该功能以使其工作。我在 ajax 代码之后，在 Team 数据行之后尝试过……有什么需要引用的吗？

标签： javascript html jquery json datatables

【解决方案1】：

而不是这个：

{ "data": "Team.Logo"},

使用这个：

{ 
  "data": "Team",
  "render": function ( data, type, row ) { 
    //console.log( data )
    return data.Logo + ' ' + data.Team + ' ' + data.modification;
  }
},

这会将单元格呈现为：

<td>
  <img src="img/NHLpics/chicagoBlackhawks.gif" style="height:40%; width:40%"> Chicago Blackhawks +-diff
</td>

当然，您可能希望更改我使用的布局。

您可以在此处查看更多列渲染器示例：columns.render()。

具体来说，在“转换数据”示例中，查看render: function ( data, type, row ) { ... }。

更详细的语法文档也可以在here找到。

【讨论】：

太棒了，谢谢。我是如此接近，但没有将渲染包含在与数据相同的卷曲中。现在完美运行。