如何将json加载到我的angular.js ng模型中?


114

我有一个我认为可能是非常明显的问题,但是我在任何地方都找不到答案。

我只是想将一些JSON数据从服务器加载到客户端。现在,我正在使用JQuery通过AJAX调用(下面的代码)加载它。

<script type="text/javascript">
var global = new Array();
$.ajax({
    url: "/json",
    success: function(reports){
        global = reports;
        return global;
        }
    });
</script>

这位于html文件中。到目前为止,它仍然有效,但问题是我想使用AngularJS。现在,虽然Angular CAN使用变量,但是我无法将整个内容加载到变量中,因此我可以为每个循环使用a。这似乎与通常位于.js文件中的“ $ Scope”有关。

问题是我无法将其他页面的代码加载到.js文件中。每个Angular示例仅显示如下内容:

function TodoCtrl($scope) {
  $scope.todos = [
    {text:'learn angular', done:true},
    {text:'build an angular app', done:false}];

因此,如果IA)想要手动输入所有内容,并且B)如果我事先知道我的所有数据是什么,那么这将非常有用。

我事先不知道(数据是动态的),所以我不想键入它。

因此,当我尝试使用$ Resource将AJAX调用更改为Angular时,它似乎不起作用。也许我无法弄清楚,但这是一个相对简单的JSON数据GET请求。

tl:dr我无法使AJAX调用工作以将外部数据加载到角度模型中。


3
我们可以看到您尝试使用$ Resource的尝试吗?它应该可以工作,所以如果我们可以帮助您调试它,那也许是最简单的……
Kris Jenkins 2012年

Answers:


189

正如Kris所提到的,您可以使用该$resource服务与服务器进行交互,但是给我的印象是您正在开始使用Angular的旅程-我上周去过那里-因此,我建议直接开始尝试使用该$http服务。在这种情况下,您可以调用其get方法。

如果您具有以下JSON

[{ "text":"learn angular", "done":true },
 { "text":"build an angular app", "done":false},
 { "text":"something", "done":false },
 { "text":"another todo", "done":true }]

你可以这样加载

var App = angular.module('App', []);

App.controller('TodoCtrl', function($scope, $http) {
  $http.get('todos.json')
       .then(function(res){
          $scope.todos = res.data;                
        });
});

get方法返回一个promise对象,第一个参数是成功的回调,第二个参数是错误 回调。

当您将$httpAngular作为函数的参数添加时,它会神奇地将$http资源注入到控制器中。

我在这里举了一些例子


非常感谢,我确实最终使用了$ http服务...尽管方式略有不同... code$ http.get('/ json')。success(function(response){$ scope.reports = response; getData(); code 对我来说有趣的是promise对象...我真的很想学习更多关于这一点。我很喜欢这个主意。我遇到的另一个问题基本上是在ajax请求上运行一个循环,所以我可以不断地“自动”刷新页面。$ timeout不适用于我
MJR_III 2012年

1
我相信应该是$ scope.todos = res; 而不是res.data。
Anoyz

响应对象具有四个属性:configdataheadersstatusdata属性中的值是您想要的。
杰米

1
值得拥有一个$ scope.todos = []; 在http请求之前,因此至少要有一个默认的空结构,以免在模板中引发错误。
秒。

1
re:$scope.todos = res;$scope.todos = res.data;-区别在于您是处于.then(response)还是处于中.success(result).success给出是,response.data而给出则.then是整个response
杰西·奇斯霍尔姆

28

这是一个如何将JSON数据加载到Angular模型中的简单示例。

我有一个JSON“ GET” Web服务,该服务从Microsoft的Northwind SQL Server的在线副本返回客户详细信息列表数据库。

http://www.iNorthwind.com/Service1.svc/getAllCustomers

它返回一些如下所示的JSON数据:

{ 
    "GetAllCustomersResult" : 
        [
            {
              "CompanyName": "Alfreds Futterkiste",
              "CustomerID": "ALFKI"
            },
            {
              "CompanyName": "Ana Trujillo Emparedados y helados",
              "CustomerID": "ANATR"
            },
            {
              "CompanyName": "Antonio Moreno Taquería",
              "CustomerID": "ANTON"
            }
        ]
    }

..我想用此数据填充一个下拉列表,看起来像这样...

角度截图

我希望每个项目的文本都来自“ CompanyName”字段,而ID则来自“ CustomerID”字段。

我该怎么办?

我的Angular控制器如下所示:

function MikesAngularController($scope, $http) {

    $scope.listOfCustomers = null;

    $http.get('http://www.iNorthwind.com/Service1.svc/getAllCustomers')
         .success(function (data) {
             $scope.listOfCustomers = data.GetAllCustomersResult;
         })
         .error(function (data, status, headers, config) {
             //  Do some error handling here
         });
}

...,它使用这组JSON数据填充“ listOfCustomers”变量。

然后,在我的HTML页面中,我将使用以下代码:

<div ng-controller='MikesAngularController'>
    <span>Please select a customer:</span>
    <select ng-model="selectedCustomer" ng-options="customer.CustomerID as customer.CompanyName for customer in listOfCustomers" style="width:350px;"></select>
</div>

就是这样。现在,我们可以在网页上看到可供使用的JSON数据列表。

关键是在“ ng-options”标签中:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

让您动脑筋是一种奇怪的语法!

当用户在该列表中选择一个项目时,“ $ scope.selectedCustomer”变量将被设置为该客户记录的ID(客户ID字段)。

此示例的完整脚本可以在这里找到:

Angular的JSON数据

麦克风


这真的有效吗?您的JSON无效(密钥不在引号中)。难道你没有错误吗?
CodyBugstein 2014年

抱歉,您是对的。我从上面安装了出色的JSONView插件的Google Chrome浏览器中截取了屏幕截图(因此您可以以一种格式良好的方式查看JSON)。但是,是的,来自我的Web服务的JSON是有效的。如果单击我文章中的链接,则可以查看此代码的实时版本。
Mike Gledhill 2014年

它行得通吗?我认为应该是data.GetAllCustomersResult
ihappyk

糟糕,您绝对正确。我已经更改了Web服务,以包括将JSON结果包装在“ GetAllCustomersResult”中,所以是的,这是必需的。我已经更新了代码示例。感谢您的单挑。
Mike Gledhill

0

我使用以下代码,但是在互联网上的某个地方却不记得源代码。

    var allText;
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function () {
        if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
                allText = rawFile.responseText;
            }
        }
    }
    rawFile.send(null);
    return JSON.parse(allText);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.