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

Posted 2023-05-08

【中文标题】如何在angularjs中通过ajax显示来自url的json数组

【英文标题】：How to display json array coming from url through ajax in angularjs

【发布时间】：2018-06-12 19:51:17

【问题描述】：

我有一个来自 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" >
    <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 表中。等待您的善意回应。

我正在考虑做这样的事情

【问题讨论】：

参考这个datatables.net/examples/data_sources/server_side.html

这里有什么问题

@JinsPeter 问题是如何在 html 表中显示 json 数组数据，就像在我的情况下只显示“正在加载”

过一段时间再回答。现在去吃午饭了。顺便说一句，请不要在 Angular js 控制器中使用 jQuery。使用角度服务

@JinsPeter 我正在等待您的友好回复。

【参考方案1】：

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

您需要在初始化要显示的键时向数据表添加更多信息。更多详情请查看datatable objects

【讨论】：

@BadshahTracker 你检查过文档吗？

我们为什么要为列名提供“数据”属性？

@BadshahTracker 是数组名。不是普通数据。data:[...] 所以我们把数据放在那里

@BadshahTracker 你的回复？

让我们continue this discussion in chat。

【参考方案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"
                ]
            );



        );

感谢大家帮助我抢到赛道。 谢谢。

【参考方案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" >
<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 表格中添加分页、搜索和排序。

如果您可以在您的 html 表格上添加分页、搜索和排序，我可以将您的问题标记为已接受。

你是第一次使用angularJS吗？/

是的，这是我第一次在 angularjs 中处理主题。