如何将 json 加载到我的 angular.js ng-model 中？

Posted 2023-02-16

【中文标题】如何将 json 加载到我的 angular.js ng-model 中？

【英文标题】：How to load json into my angular.js ng-model?

【发布时间】：2012-10-12 19:36:35

【问题描述】：

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

我只是想将一些 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 可以使用变量，但我无法将整个内容加载到变量中，因此我可以为每个循环使用一个。这似乎与“$Scope”有关，它通常位于 .js 文件中。

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

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

所以，这很有用，如果我 A）想要手动输入所有这些，并且 B) 如果我提前知道我所有的数据是什么......

我事先不知道（数据是动态的），我不想输入它。

所以，当我尝试使用 $Resource 将 AJAX 调用更改为 Angular 时，它似乎不起作用。可能我想不通，不过是比较简单的对JSON数据的GET请求。

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

【问题讨论】：

我们可以看看您使用 $Resource 的尝试吗？它应该可以工作，所以如果我们帮助您调试它也许是最简单的......

【参考方案1】：

正如 Kris 提到的，您可以使用 $resource 服务与服务器进行交互，但我觉得您正在开始使用 Angular 的旅程 - 我上周在那里 - 所以我建议直接开始尝试使用 @ 987654324@服务。在这种情况下，您可以调用它的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 对象，该对象 第一个参数是 success 回调，第二个参数是 error 回调。

当你添加$http 作为函数的参数时，Angular 会变魔术 并将$http 资源注入您的控制器。

我在这里放了一些例子

http://plnkr.co/edit/Wuc6M7?p=preview https://gist.github.com/3938567

【讨论】：

非常感谢，我最终还是改用了 $http 服务...尽管方式略有不同... code $http.get('/json').success( function (response) $scope.reports = response; getData(); code 让我感兴趣的是 promise 对象...我真的很想了解更多。我喜欢它的想法。另一个问题我一直在基本上在 ajax 请求上运行一个循环，这样我就可以不断“自动”刷新页面。$timeout 对我不起作用。

我认为应该是 $scope.todos = res;而不是 res.data.

响应对象有四个属性：config、data、headers和status。 data 属性中的值是您想要的。

值得拥有 $scope.todos = [];在 http 请求之前，所以你至少有一个默认的空结构，以免在你的模板中抛出错误。

re: $scope.todos = res; 或 $scope.todos = res.data; -- 区别在于您是在 .then(response) 还是在 .success(result) .success 被赋予 response.data 而 .then给出整个response。

【参考方案2】：

这是一个如何将 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（CustomerID 字段）。

此示例的完整脚本可在此处找到：

JSON data with Angular

迈克

【讨论】：

这真的有效吗？您的 JSON 无效（键不在引号中）。你没有收到错误吗？

对不起，你是对的。我从安装了出色的 JSONView 插件的 Google Chrome 上截取了上面的屏幕截图（因此您可以以格式良好的方式查看 JSON）。但是，是的，我的 Web 服务中的 JSON 是有效的。如果您点击我文章中的链接，您可以查看此代码的实时版本。

有效吗？我认为应该是 data.GetAllCustomersResult

糟糕，你说得对。我已更改 Web 服务以包括将 JSON 结果包装在“GetAllCustomersResult”中，所以是的，这是必需的。我已经更新了代码示例。感谢您的提醒。

【参考方案3】：

我使用以下代码，在互联网某处找到，但不记得来源。

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