无法使用 angular 工厂服务获取 json 数据

Question

我无法使用 angular 工厂服务获取我的 json 数据。我似乎正确加载了文件，开发人员工具控制台上没有错误，请求中的数据仍然未定义 - 表示为空。

我的 json 文件：

{
  "Translations": [
    {
      "WhatsNew": [
        {
          "English": "Whats New",
          "Hebrew": "מה חדש?",
          "Arabic": "الجديد في الموقع"
        }

      ],
      "SearchByWord": [
        {
          "English": "Search By Word",
          "Hebrew": "חיפוש לפי ערך",
          "Arabic": "البحث حسب الكلمة"
        }
      ],
      "SearchByRoot": [
        {
          "English": "Search By Root",
          "Hebrew": "חיפוש לפי שורש",
          "Arabic": "البحث حسب الجذر"
        }
      ],
      "HebrewArabicIndex": [
        {
          "English": "to the Hebrew-Arabic Index",
          "Hebrew": "לאינדקס העברי-ערבי",
          "Arabic": "إلى الفهرس العبري- العربي"
        }
      ],
      "ArabicHebrewDictionary": [
        {
          "English": "to the Arabic-Hebrew Dictionary",
          "Hebrew": "למילון הערבי-עברי",
          "Arabic": "إلى القاموس العربي- العبري"
        }
      ],
      "ExamplesAndNotes": [
        {
          "English": "Examples and Notes",
          "Hebrew": "דוגמאות והערות",
          "Arabic": "أمثلة    وملاحظات"
        }
      ],
      "IdiomsAndExpressions": [
        {
          "English": "Idioms and Expressions",
          "Hebrew": "ביטויים וצירופים",
          "Arabic": "تعابير لغوية"
        }
      ],
      "WordsFromSameRoot": [
        {
          "English": "Words From Same Root",
          "Hebrew": "ערכים מאותו השורש",
          "Arabic": "مشتقات الجذر"
        }
      ],
         "SearchResults": [
        {
          "English": "Search Results",
          "Hebrew": "תוצאות החיפוש",
          "Arabic": "نتائج البحث"
        }
      ]
    }
  ]
}

JS 文件：

adicApp.factory('langService', function ($http) {
    return {
        getLanguage: getLanguage,
        setLanguage: setLanguage,
        getLangRes: getLangRes
    };

    var _lang;
    function getLanguage() {
        return _lang;
    }
    function setLanguage(lang) {
        _lang = lang;
    }

    function getLangRes(lang) {
        var langRes;

        _lang = lang;

        switch (lang) {
            case "English":
                langRes = getEnglishLangRes();
                break;

            case "Hebrew":
                langRes = getHebrewLangRes();
                break;

            case "Arabic":
                langRes = getArabicLangRes();
                break;

            default:
                langRes = getEnglishLangRes();
                break;
        }

        return langRes;
    }

    function getEnglishLangRes() {
        var res = [];
            //{
            //    Partial1_Key: "Partial 1",
            //    Partial2_Key: "Partial 2",
            //    Search_String_Value_Key: "Search String Value",
            //    Count_Of_Words_Key: "Count Of Words",
            //    Data_Id_Key: "Data ID",
            //    Value_Key: "Value",
            //    Search_Category_Key: "Search Category",
            //    Whats_New: null
            //};
        $http.get('../Scripts/Languages/languages.json').success(function (data) {
              res = data.translations
        })
        .error(function (data, status, headers, config) {
            alert("Status: " + status);
            //$log.error('Problem on selectCountry api Cities :' + status);
        });

        return res;
    }

    function getHebrewLangRes() {
        var res =
            {
                Partial1_Key: "חֵלֶק 1",
                Partial2_Key: "חֵלֶק 2",
                Search_String_Value_Key: "ערך מחרוזת חיפוש",
                Count_Of_Words_Key: "ספירת מילים",
                Data_Id_Key: "מספר מזהה",
                Value_Key: "ערך",
                Search_Category_Key: "חיפוש קטגוריה"
            };

        return res;
    }

    function getArabicLangRes() {
        var res =
            {
                Partial1_Key: "الجزء 1",
                Partial2_Key: "الجزء 2",
                Search_String_Value_Key: "قيمة سلسلة البحث",
                Count_Of_Words_Key: "عدد الكلمات",
                Data_Id_Key: "رقم الهوية",
                Value_Key: "القيمة",
                Search_Category_Key: "فئة البحث"
            };

        return res;
    }
});

并查看：

 <div class="hidden-xxs hidden-xs hidden-sm col-md-3 col-lg-4">
            <div id="scrolling-news-sidebar" class="sidebar">
                <h2>{{langRes.WhatsNew[0]}}</h2>
                <div class="marquee">

知道为什么它不起作用吗？我很茫然。我试着在网上寻找答案，到目前为止似乎没有帮助。我认为我的 json 有问题，但我没有发现我的文件有任何可疑之处。

Answer 1

$http 请求成功和失败回调不再作为 "success" 或 "error" 作为 curry 函数出现。它们基于 Promises 概念。所以会有一个 "then" curry 函数，它在它的控制块中既有成功也有错误。

AngularJS 1.4 库支持您使用的格式。所以请先检查您使用的 Angular 是什么版本。

如果您使用的是最新的 AngularJS 1.6 库，请按照以下格式格式化您的请求 -

$http.get('data.json').then(function success(data) {
      console.log(data)
}, function error(res){
      console.log(res);
});

我已经在 Plunker 中检查过了，它工作正常。 https://embed.plnkr.co/eoLHfd3gzbTLAXdnNVXi/

Answer 2

首先，return您的承诺：

function getEnglishLangRes() {
    var res = [];
        //{
        //    Partial1_Key: "Partial 1",
        //    Partial2_Key: "Partial 2",
        //    Search_String_Value_Key: "Search String Value",
        //    Count_Of_Words_Key: "Count Of Words",
        //    Data_Id_Key: "Data ID",
        //    Value_Key: "Value",
        //    Search_Category_Key: "Search Category",
        //    Whats_New: null
        //};
     ͟r͟e͟t͟u͟r͟n͟ $http.get('../Scripts/Languages/languages.json')
      ̶.̶s̶u̶c̶c̶e̶s̶s̶ .then(function (response) {
          var data = response.data
          res = data.translations
          ͟r͟e͟t͟u͟r͟n͟  res; 
    })
      ̶.̶e̶r̶r̶o̶r̶ .catch(function (response) {
        var status = response.status;
        alert("Status: " + status);
        //$log.error('Problem on selectCountry api Cities :' + status);
        //IMPORTANT
        throw response;
    });

    ̶r̶e̶t̶u̶r̶n̶ ̶r̶e̶s̶;̶
}

当 .catch 方法响应处理程序省略一个 throw statement 它将一个被拒绝的承诺转换为一个已实现的承诺承诺。

无法使用 angular 工厂服务获取 json 数据

Unable to fetch json data using angular factory service

javascript

angularjs

angularjs-factory

angularjs-http

angular-promise