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

Question

我正在查看以下 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 table 中：

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在该列的同一 table 单元格中。谁能告诉我这是否可行？

如果需要更多信息，请告诉我，在此先感谢！

Answer 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。

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

How do I access lower level variables and concat them when importing with ajax

html

javascript

jquery

json

datatables