如何将json加载到我的角度。js ng-model吗?

I have what I think is probably a very obvious question, but I couldn't find an answer anywhere.

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

I am just trying to load some JSON data from my server into the client. Right now, I am using JQuery to load it with an AJAX call (code below).

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

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

This is located in the html file. It works so far, but the issue is that I want to use AngularJS. Now, while Angular CAN use the variables, i cannot load the whole thing into a variable so I can use a for each loop. This seems to be related to the "$Scope", which is usually located in the .js file.

它位于html文件中。到目前为止，它是可行的，但问题是我想使用AngularJS。现在，虽然角可以使用变量，但我不能将整个东西加载到一个变量中，这样我就可以为每个循环使用一个变量。这似乎与“$Scope”有关，它通常位于.js文件中。

The problem is that I cannot load code from other pages into a .js file. Every example of Angular only shows stuff like this:

问题是我不能将代码从其他页面加载到.js文件中。每个角的例子都是这样的:

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

So, this is useful, if I A) Want to type all of this by hand, AND B) If I know in advance what all my data is...

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

I don't know in advance (the data is dynamic) and I don't want to type it.

我不预先知道(数据是动态的)，我不想输入它。

So, when I tried to change the AJAX call to Angular using $Resource, it doesn't seem to work. Maybe I can't figure it out, but it is a relatively simple GET request for JSON data.

因此，当我尝试使用$Resource更改AJAX调用时，它似乎不起作用。也许我无法理解它，但它是一个相对简单的JSON数据请求。

tl:dr I can't get AJAX calls to work in order to load external data into an angular model.

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

3 个解决方案

#1

As Kris mentions, you can use the $resource service to interact with the server, but I get the impression you are beginning your journey with Angular - I was there last week - so I recommend to start experimenting directly with the $http service. In this case you can call its get method.

正如Kris提到的，您可以使用$resource服务与服务器进行交互，但是我得到的印象是您开始了您的旅程——我上周在那里——所以我建议您开始直接使用$http服务。在这种情况下，你可以调用它的get方法。

If you have the following JSON

如果有以下JSON。

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

You can load it like this

你可以这样来装。

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

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

The get method returns a promise object which first argument is a success callback and the second an error callback.

get方法返回一个承诺对象，第一个参数是成功回调，第二个是错误回调。

When you add $http as a parameter of a function Angular does it magic and injects the $http resource into your controller.

当您将$http添加为函数的一个参数时，它会变魔术并将$http资源注入到您的控制器中。

I've put some examples here

我在这里举了一些例子。

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

#2

Here's a simple example of how to load JSON data into an Angular model.

这里有一个简单的例子，说明如何将JSON数据加载到一个角度模型中。

I have a JSON 'GET' web service which returns a list of Customer details, from an online copy of Microsoft's Northwind SQL Server database.

我有一个JSON 'GET' web服务，它从微软的Northwind SQL Server数据库的在线副本中返回客户详细信息列表。

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

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

It returns some JSON data which looks like this:

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

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

..and I want to populate a drop down list with this data, to look like this...

. .我想用这个数据填充一个下拉列表，像这样。

I want the text of each item to come from the "CompanyName" field, and the ID to come from the "CustomerID" fields.

我希望每个条目的文本来自“CompanyName”字段，而ID来自“CustomerID”字段。

How would I do it ?

我该怎么做呢?

My Angular controller would look like this:

我的角控制器是这样的

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

... which fills a "listOfCustomers" variable with this set of JSON data.

…它用这组JSON数据填充了“listOfCustomers”变量。

Then, in my HTML page, I'd use this:

然后，在我的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>

And that's it. We can now see a list of our JSON data on a web page, ready to be used.

就是这样。现在我们可以在web页面上看到JSON数据的列表，可以使用了。

The key to this is in the "ng-options" tag:

这其中的关键在于“ng-options”标签:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

It's a strange syntax to get your head around !

这是一种奇怪的语法，让你头脑清醒!

When the user selects an item in this list, the "$scope.selectedCustomer" variable will be set to the ID (the CustomerID field) of that Customer record.

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

The full script for this example can be found here:

这个例子的完整脚本可以在这里找到:

JSON data with Angular

JSON数据与角

Mike

迈克

#3

I use following code, found somewhere in the internet don't remember the source though.

我使用下面的代码，在互联网的某个地方发现不记得源代码。

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