Как перебирать интернационализированный массив JSON с помощью i18next и Angular

У меня есть серия файлов интернационализации json с базовыми строками, массивами строк и массивами объектов json, и я пытался отображать их в angular, используя различные библиотеки i18n. Файл en_GB находится ниже

{
  "key": "value en_GB",
    "headings": ["header1 en_GB", "header2 en_GB", "header3 en_GB"],
    "objects": [
        {"title": "title1 en_GB", "subject": "subject1 en_GB"},
        {"title": "title2 en_GB", "subject": "subject2 en_GB"},
        {"title": "title3 en_GB", "subject": "subject3 en_GB"}
    ]
}

Я пробовал angular-translate - https://angular-translate.github.io/ - но он не поддерживает массивы. Обходной путь - вернуть строку, разделенную разделителем, а затем вызвать split () для этой строки. Однако он вообще не поддерживает возврат объектов JSON.

В настоящее время я изучаю ng-i18next - https://github.com/i18next/ng-i18next - модуль angular, использующий библиотеку i18next, и он довольно близок к тому, что мне нужно.

Строковые массивы разделяются символами новой строки - «\ n» - поэтому я разделил этот символ для итерации по массиву, но у меня все еще та же проблема с массивами объектов JSON. Я могу отображать определенные индексы в массиве с индексом - например, objects.0.title, но я не могу выполнить итерацию с помощью ng-repeat.

Я установил здесь плункер, который демонстрирует это - http://plnkr.co/gTuHDZRK0j2fJkw5PBsG Кто-нибудь может предложить способ перебора объектов в массиве "объекты"?


angularjs internationalization i18next
person Joseph McCarthy    schedule 01.05.2015    source источник
comment
Сопоставьте свои данные с директивой, которая лучше всего соответствует вашим потребностям ... вместо того, чтобы искать директиву, соответствующую вашим данным. Не требуется много времени, чтобы перебирать ваши массивы, чтобы превратить их в объект, который соответствовал бы директиве translate. Использование объекта ускорит получение каждого перевода, чем структура массива   -  person charlietfl    schedule 01.05.2015

Ответы (2)


arrow_upward
1
arrow_downward

Ваш ответ отчасти правильный. Мне нужно было исправить некоторые ошибки, чтобы скомпилировать код.

Первая проблема связана с $ translate на вашем контроллере. Смотрите код, чтобы правильно перевести ваш пример:

.controller('MainCtrl', function ($scope, $translate) {
  var keys = ["one", "two", "three"];
  $scope.objects = []
  angular.forEach(keys, function(value, key) {
    var object = {};
    $translate("objects." + value + ".title").then(function(translation) {
       object.title = translation;
    });
    $translate("objects." + value + ".subject").then(function(translation) {
       object.subject = translation;
    });
    this.push(object);
 }, $scope.objects);
});

И в моем app.js я настроил $ translateProvider следующим образом:

$translateProvider.useStaticFilesLoader({
prefix: '/languages/',
suffix: '.json'
});
var language = navigator.language.split('-')[0]; //some bugs here
$translateProvider.preferredLanguage(language);

Я пробовал использовать json с другим языком и работает.

person Lucas Araújo    schedule 25.10.2016

arrow_upward
1
arrow_downward

Я решил эту проблему с помощью angular-translate с аналогичным решением для демонстрации «Загрузить статические файлы» в кодовой базе - https://github.com/angular-translate/angular-translate/blob/master/demo/ex7_load_static_files.htm

Я преобразовал массив объектов, преобразованный в

{
  "key": "value en_GB",
    "headings": ["header1 en_GB", "header2 en_GB", "header3 en_GB"],
    "objects": {
        "one": {"title": "title1 en_GB", "subject": "subject1 en_GB"},
        "two": {"title": "title2 en_GB", "subject": "subject2 en_GB"},
        "three": {"title": "title3 en_GB", "subject": "subject3 en_GB"}
    }
}

В контроллере я добавил ключи к массиву и назначил их переводы массиву в $ scope, который я могу перебирать, используя ng-repeat в частичном HTML-файле.

var keys = ["one", "two", "three"];
$scope.objects = []
angular.forEach(keys, function(value, key) {
    var object = {};
    $translate("objects." + key + ".title").then(function(translation) {
         object.title = translation;
    }
    $translate("objects." + key + ".subject").then(function(translation) {
         object.subject = translation;
    }
    this.push(object);
}, $scope.objects);


<div ng-repeat="object in objects">{{object.title}} {{object.subject}}</div>

Обратной стороной этого является то, что любые новые объекты JSON, которые я добавляю в массив «объектов», не выбираются автоматически, его имя атрибута необходимо добавить в массив «ключей», чтобы отобразить его на экране.

person Joseph McCarthy    schedule 06.05.2015