javascript - Angular 在 Controller 中使用 Json 数据

标签 javascript angularjs json

我正在关闭此问题,因为该问题已解决,1 个问题是我使用的是 $scope.data = data (而不是 $scope.data = data.data)。另一个原因是因为我选择的答案。

我想做的是从 json 文件获取数据(一个对象)并将其分配给另一个变量(或者我想的 $scope 属性?)。

但是当我这样做时,我初始化的对象会在 $http.get() 调用发生之前分配给我的备用变量?

<!DOCTYPE html>
<html>
<head>
    <title>Playing with Angular</title>
    <script src="angular.min.js"></script>
</head>
<body data-ng-app="myApp" ng-controller="myCtrl" ng-init="">
    <p>{{ element1 }}</p>
    <script type="text/javascript">
        var app = angular.module('myApp', []);
        app.controller('myCtrl', function ($scope, $http) {
            $scope.data = {};
            $http.get("data.json").then(function(data) {
                $scope.data = data.data;
            });
            $scope.element1 = $scope.data.element1;
        });
    </script>
    </div>
</body>
</html>

data.json 非常简单:

{
    "element1": {
        "sub1":1,
        "sub2":2
    }
}

我是否正在尝试做一些在 Angular 中不可能实现的事情? 如果这个问题已在其他地方得到解答,请指出我。

编辑

更近了一步

我将上面的 $scope.data = data; 更改为 $scope.data = data.data;。这就是我最大的问题(无论如何,在我看来,没有其他人看到这一点这一事实支持了这一点)。

现在我的问题是我正在寻找比下面建议的 Narain Mittal 更好的解决方案。我可以将 $scope.element1 = $scope.data.element1; 放在 $http.get("data.json").then(function(data) {});,它会起作用。这不是我想要的。

但是我要整合我到底想要什么,然后进行代码审查。感谢您的帮助!

最佳答案

您需要在 .then 函数回调中添加语句 $scope.element1 = $scope.data.element1;,如下所示:

 $http.get("data.json").then(function(data) {
       $scope.data = data;
       $scope.element1 = $scope.data.element1;
  });

它对您不起作用的原因是 JavaScript 执行不会等待 $http 调用完成才继续分配,除非您将其放入回调中。

关于javascript - Angular 在 Controller 中使用 Json 数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35351930/

相关文章:

java - 如何将jsonarray转换为map或其他可以与datastax值进行比较的格式

jquery - 如果数据不在数据库中,如何在数据表中声明列?

java - 从 json 文件加载 spring-boot 属性

javascript - 如何使用 HTML5 Canvas 为同一行中的不同单词着色?

javascript - div 中的 CSS 绝对定位元素

javascript - AngularJS 1.4.3 ngRepeat 在具有隔离范围的指令中使用时打印 {{ variableName }} 而不是值

javascript - Angular.forEach 不返回对象中的最后一项

javascript - 在 jquery 日期选择器上应用 .ui-datepicker-trigger 类

处理时区转换的 JavaScript 库

javascript - AngularJS 服务注入(inject)器错误