Question

我有一个来自网址的json数组： http://blahblahblah.com/company/all，如下：

在angularjs控制器中，我有类似的东西：

    $('#example-1').DataTable({
        "ajax" : 'http://blahblahblah.com/company/all',
        "columns": [
           {"data": "companyId"},
           {.....}, // I can't assign "data" name to array because it is already unnamed.
        ]
    });

遍历html table_id example-1

<table id="example-1" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Company</th>
            <th>Legal Name</th>
            <th>DBA Name</th>
            <th>Formation</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <th>Company</th>
            <th>Legal Name</th>
            <th>DBA Name</th>
            <th>Formation</th>
        </tr>
    </tfoot>

输出：

所以，我的问题是如何识别问题顶部提到的UNNAMED JSON ARRAY上面的列名，并将其显示在html表中。等待你的回应。

我正在考虑做这样的事情

Answer 1

$(document).ready(function() {
    $('#example').DataTable( {
        "ajax": "http://blahblahblah.com/company/all",
        "columns": [
            { "data": "companyId" },
            { "data": "legalName" },
            { "data": "dbaName" },
            { "data": "formation"}
        ]
    } );
} );

在初始化要显示的键时，您需要向数据表添加更多信息。更多细节请检查datatable objects

Answer 2

我无法确定在我的JSON数组中识别和使用列名的正确语法，我这样做了，并解决了我的问题。所以现在数据在我的表格中显示得很好，这样：

$.getJSON('http://blahblahblah/company/all', function(data) {

            $('#companies').DataTable({
                "aaData": data,
                "aoColumns": [
                    {"mDataProp":"companyId"},
                    {"mDataProp":"legalName"},
                    {"mDataProp":"dbaName"},
                    {"mDataProp":"formation"}
                ]
            });



        });

我还添加了像companyId这样的超链接：

    $.getJSON('http://blahblahblah/company/all', function(data) {

            var companyId = null;
            $('#companies').DataTable({
                "aaData": data,
                "aoColumns": [
                    {"mDataProp":"companyId", "render": function(data, type, row, meta) {
                        if( type==='display' ) {
                            companyId = data;
                            data = '<a href="' + "/pages/company?companyId=" +companyId+ '">' + data + '</a>';
                        }
                        return data;
                    }},
                    {"mDataProp":"legalName"},
                    {"mDataProp":"dbaName"},
                    {"mDataProp":"formation"}
                ]
            });



        });

我很感谢大家帮我抓住赛道。感谢。

Answer 3

实际执行此操作的方法是在数据数组中使用ng-repeat。对于数据提取，请使用带有promise的角度服务。

在控制器

中

<table id="example-1" class="display" cellspacing="0" width="100%">
<thead>
    <tr>
        <th>Company</th>
        <th>Legal Name</th>
        <th>DBA Name</th>
        <th>Formation</th>
    </tr>
</thead>


 <tr ng-repeat="var item in ctrl.tableData ">
       <td>{{item.companyId}}</td>
       <td>{{item.legalName}}</td>
       <td>{{item.dbaName}}</td>
       <td>{{item.formation}}</td>
 </tr>
   </table>

在HTML

中

<label for="date">{{ "date" | translate }}</label>
<input type="date" class="form-control checking-field" id="date">

如何通过angularjs中的ajax显示来自url的json数组

3 个答案: