How to load json into my angular.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).

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

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

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

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.

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

256811 次浏览
小开
最佳答案

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

If you have the following 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;
});
});

The get method returns a promise object which 第一个参数是 成功回调函数，第二个参数是 错误 callback.

当你添加 $http作为一个函数的参数 Angular 是魔术 并将 $http资源注入到控制器中。

我在这里举了一些例子

小开

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

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.

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"
}
]
}

我想用这些数据填充一个下拉列表，看起来像这样。

Angular screenshot

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

我要怎么做？

我的角度控制器是这样的:

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 数据填充“ listOfCustomer”变量。

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

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

关键在于“ ng-options”标签:

customer.CustomerID as customer.CompanyName for customer in listOfCustomers

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

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

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

带有角度的 JSON 数据

麦克

小开

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

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

提交答案