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

Question

我有一个来自 url 的 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。对于数据获取，请使用带有承诺的角度服务。

在控制器中

var self = this;// this is the controller which is aliased as ctrl at routing

var theData = yourService.FetchData(params).then(function(data){
      self.tableData = data; // not going for the exact implementation.

},function(err){
      manageError(err);// manage your errors here.
}));

在 HTML 中

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