【问题标题】:Store JSON data into a variable将 JSON 数据存储到变量中
【发布时间】:2015-05-22 10:34:08
【问题描述】:

我是 AngularJS 的新手。我只想将 JSON 文件数据加载到位于工厂中的变量中。

myApp.factory('quizFactory', function () {
    var questions = [
        {
            "setId":1,
            "question":"What is the value of the 7 in the following number? 850,765",
            "options": ["70", "7", "7000", "700"],
            "answer": 3
        },
        {
            "setId":2,
            "question":"Is 7 & 9 even or odd?",
            "options": ["Even", "Odd", "Can't Say", "Dont know"],
            "answer": 1
        },
        {
            "setId":3,
            "question":"In the number 5,281,946 what is the value of the 3rd place?",
            "options": ["100", "10,000", "1,000,000", "1,000"],
            "answer": 0 
        },
        {
            "setId":4,
            "question":"Is 12 + 50 even or odd?",
            "options": ["Even", "Odd", "Can't Say", "Dont know"],
            "answer": 0 
        },
        {
            "setId":5,
            "question":"What does the 3 represent in the number below? 3051",
            "options": ["3", "30", "300", "3000"],
            "answer": 3 
        }
    ];

    return {
        getQuestion: function(id) {
            if(id < questions.length) {
                return questions[id];
            } else {
                return false;
            }
        }
    };
});

上面的代码存放在app.js文件中,我的JSON文件和上面一样。

[


{
        "setId":1,
        "question":"What is the value of the 7 in the following number? 850,765",
        "options": ["70", "7", "7000", "700"],
        "answer": 3
    },
    {
        "setId":2,
        "question":"Is 7 & 9 even or odd?",
        "options": ["Even", "Odd", "Can't Say", "Dont know"],
        "answer": 1
    },
    {
        "setId":3,
        "question":"In the number 5,281,946 what is the value of the 3rd place?",
        "options": ["100", "10,000", "1,000,000", "1,000"],
        "answer": 0 
    },
    {
        "setId":4,
        "question":"Is 12 + 50 even or odd?",
        "options": ["Even", "Odd", "Can't Say", "Dont know"],
        "answer": 0 
    },
    {
        "setId":5,
        "question":"What does the 3 represent in the number below? 3051",
        "options": ["3", "30", "300", "3000"],
        "answer": 3 
    }
];

我也试过this question

【问题讨论】:

    标签: json angularjs factory


    【解决方案1】:

    您可以使用$http 读取json文件。例如

    $http.get('someFile.json').success(function(data) {    
            questions = data;
        });    
    

    【讨论】:

    • 我用 myApp.factory('quizFactory',['$http', function ($http) { $http.get('ques.json').success(函数(数据){ var questions = data; }); });但仍然无法正常加载 json 文件
    • 它应该可以工作,可能是你的 json 文件不在正确的位置。这是工作演示plnkr.co/edit/PpRvBhbZ9LHT8EQeUV2a?p=preview
    • 在 app.js 文件中,如果我将 app.controller 更改为 app.factory,它将无法正常工作
    • 抱歉问了这么多问题,你能帮我在这个plnkr.co/edit/fOJoCVuIksmD3LSnGqBt?p=cataloguemyApp.directive 文件中添加控制器数据吗
    • 我很乐意提供帮助 :),您能否发布一个新问题来描述问题所在
    【解决方案2】:

    你可以像这样重新定义你的工厂:

      angular.module('yourmodule')
     .factory('jsonResourceService', ['$http',
    function($http) {
      var jsonResourceService = {};
    
      jsonResourceService.load = function(callback) {
        $http.get('path/data.json').success(function(data) {
          callback(data);
        });
       return jsonResourceService;
    
    
    }
    ]);
    

    并像这样从您的控制器调用它:

         $scope.objectsArray = [];
    
      jsonResourceService.load(function(data) {
     $scope.objectsArray;
    }); 
    

    【讨论】:

    • 为什么需要forEach循环?相反,您可以直接将数据存储到数组对象中。
    • 刚刚在我的情况下编辑过,我在将其添加到数组之前做了一些额外的处理。
    【解决方案3】:

    如果我想在控制器内的某个特定请求上将 JSON 数据添加到工厂变量就是您的意思,那么$http 是更可取的:

         appmodule.controller('appCtrl',   ['$http','quizFactory',function($http,quizFactory){
            $http('somefile.json').success(function(data){
               quizFactory.questions=data;  
            }
         })
    

    这里注意,你必须依赖注入工厂,是的,不需要手动解析数据,Angular会自动照顾它。

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2018-04-04
      • 2013-04-26
      • 2023-03-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多