Невозможно получить данные json с помощью службы angular factory

Я не могу получить свои данные json, используя заводскую службу angular. Кажется, я загружаю файлы правильно, в консоли инструментов разработчика нет ошибок, но данные не определены в запросе - значит, пусто.

Мой 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, но я не могу найти ничего подозрительного в моем файле.


person Barr J    schedule 13.08.2017    source источник
comment
Это очень сбивает с толку. У вас есть функции для независимого извлечения каждого языка, но тот же JSON содержит языковые строки в массиве на основе английского эквивалента. Я чувствую, что в коде чего-то не хватает, чтобы res соответствовало тому, что вы вводите в разделе иврит/арабский язык. Тем не менее, вы загружаете файл JSON с объектом, имеющим Tпереводы в качестве свойства, но ваш метод $http ищет tпереводы (нижний регистр).   -  person Brian    schedule 13.08.2017
comment
Задавая вопрос о проблеме, вызванной вашим кодом, вы получите гораздо лучшие ответы, если предоставите код, который люди могут использовать для воспроизведения проблемы. Этот код должен быть… минимальным — используйте как можно меньше кода, который по-прежнему вызывает ту же проблему. См. раздел Как создать минимальный, полный и проверяемый пример.   -  person georgeawg    schedule 13.08.2017


Ответы (2)


Для начала верните свои обещания:

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 преобразует отклоненное обещание в выполненное обещание.

person georgeawg    schedule 13.08.2017

Обратные вызовы успеха и неудачи запроса $http больше не приходят как «успех» или «ошибка» в качестве карри-функции. Они основаны на концепции Promises. Таким образом, будет функция карри «тогда», которая будет иметь как успех, так и ошибку внутри своего управляющего блока.

Используемый вами формат поддерживается в библиотеке 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/

person Ashvin777    schedule 13.08.2017
comment
Я использую ниже. Я переключился с $http.get на $http.jsonp, однако есть синтаксическая ошибка: неожиданный токен в ':' в строке 2 в json - person Barr J; 13.08.2017
comment
Используйте $http.get и попробуйте - person Ashvin777; 13.08.2017
comment
пытался безрезультатно, $http.get возвращает ноль - person Barr J; 13.08.2017
comment
Извините, я не могу понять, что вы имеете в виду здесь. Могу ли я узнать версию библиотеки AngularJS, которую вы используете. Также вы можете создать плункер и продемонстрировать мне проблему. - person Ashvin777; 13.08.2017