当前位置: 首页 > 面试题库 >

从Angularjs中的JSON文件读取数据

邢项禹
2023-03-14
问题内容

Hai,我是Angularjs的新手。我正在尝试从JSON文件读取数据,但是它返回了奇怪的输出。这是我的controller.js文件

angular
.module('app')
.controller('homeCtrl',function($scope,Friend){
      $scope.friends=Friend.get();
      console.log("DATA FROM JSON:",$scope.friends);
      $scope.title="Home";

})

这是我的services.js文件

angular
.module('app')
.factory('Friend',function($http){

   return {
    get:function(){

            console.log("inside function");
            return [


            $http.get('/api/get.json').then(function(msg){

                return msg.data;    
            })
           ]          
        }
   }
})

控制台输出为

DATA FROM JSON: 
[Object]
0: Object
length: 1
__proto__: Array[0

请帮忙。


问题答案:

$ http.get 返回一个promise,您将返回一个包含该promise的数组。

而是这样做:

angular
.module('app.services', [])
.factory('Friend', function ($http) {
    return {
        get: function () {
            console.log("inside function");
            return $http.get('/api/get.json');
        }
    };
});

然后以这种方式使用您的工厂:

.angular
.module('app.controllers', ['app.services'])
.controller('yourCtrl', function ($scope, Friend) {
    Friend.get().then(function (msg) {
        $scope.msg = msg;
    });
});


 类似资料:
  • 问题内容: 只是因为一个简单,易于表达的陈述使我的脸上有些错误,所以我有点头疼。 我有一个名为strings.json的json文件,如下所示: 我现在想读取json文件。我发现了以下这些语句,但是不起作用: 控制台上显示的错误是这样的: 已编辑 从更改为 并得到了这个: 问题答案: 该方法(“ load”中没有“ s”)可以直接读取文件: 您正在使用方法,该方法仅用于 字符串 参数。 编辑:新消

  • 我有一个名为Strings.json的json文件,如下所示: 我想读取json文件,现在仅此而已。我发现了这些说法,但它不起作用: 控制台上显示的错误是: 已编辑 从更改为 得到了这个:

  • 一个看起来简单、容易的陈述却让我犯了一些错误。 我有一个名为strings.json的JSON文件,如下所示: 我想阅读JSON文件,目前仅此而已。我发现了这些语句,但它不起作用: 控制台上显示的错误如下: 如果我使用<code>json。加载而不是<code>json。加载,我得到以下错误:

  • 问题内容: 我想从本地计算机上的JSON文件中获取数据。但是我无法获取数据。它显示了$ http的某些跨域错误。 这是我的代码。 任何人都可以帮助我如何显示本地JSON文件中的数据?提前致谢。 问题答案: 很简单,就像

  • 问题内容: 我有点头疼,只是因为一个简单,易于表达的陈述使我的脸上有些错误。 我有一个名为的文件,如下所示: 我现在想读取文件。我发现了以下这些语句,但是不起作用: 控制台上显示的错误是这样的: 已编辑 从更改为 并得到了: 问题答案: 该方法( 中没有 )可以直接读取文件: 你正在使用方法,该方法仅用于字符串参数。 编辑:新消息是一个完全不同的问题。在这种情况下,该文件中存在一些无效的。为此,我

  • 问题内容: 在angularJS中,如何从属性文件中读取值? app.js: 问题答案: 如果是驻留在Web服务器上的文件,则只需执行以下操作: 您可以在此处查看示例: http://plnkr.co/edit/3Ne3roFOwcfVmg2mgnUr?p=preview