Как правильно сгенерировать HTML с текстом из json?

Question

[Ivan Kashmir]

Есть функция которая через ajax достает текст из json и вставляет его в какой то обьект

$.fn.setLanguage = function(options){

        options = $.extend({
            language: 'ru',
            text: this.attr('data-text')
        }, options);

        var make = function(){
            var el = $(this);
            $.ajax({
                url : options.language +'.json',
                dataType: 'json',
                success:function(data) {
                    el.html(data[options.text]);
                }
            });
        };

        return this.each(make);
    };

Сама вставка:

var btn = $('<button type="button"></button>');
    btn.setLanguage({text:'login_error'});
    $('body').append(btn);

Но так неудобно, так как в той же кнопке могут быть еще какие то элементи и неизвестно куда вставлять текст.
Решил делать как то так:

$.getText = function(){
        var result;
        $.ajax({
            url :  'text.json',
            async: false,
            dataType: 'json',
            success:function(data) {
                result = data;
            }
        });
        return result
    };

var btn = $('<button type="button">'+ $.getTextFromJson('login_error') +'</button>');

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

Comments

[Виталий Инчин ☢]

Можно пример возвращаемого json?

[Ivan Kashmir]

{
"focalName": "Имя",
"focalPost": "Должность",
"focalSection": "Отдел",
"focalPhone": "Телефон",
"focalEmail": "E-mail",
"focalSkype": "Skype",
"focalViber": "Viber"
}

[Виталий Инчин ☢]

Ivan Kashmir: Так, а что должно быть в результате?

[Ivan Kashmir]

Нужно возвращать текст из json, удобно и гибко вставлять его куда надо. Например создать кнопку и вставить в нее текст сразу во время создания : var btn = $('[span]'+ здесь_текст_из_json +'[span]'); Ниже Алексей советует более гибкий вариант чем мой, так как можно текст вставить куда угодно. Но все же это не совсем удобно каждый раз при создании нового элемента искать в нем нужный селектор.

Answer 1

[Алексей Уколов]

Я бы реализовал что-то вроде этого.

$.fn.setLanguage = function (options) {
    options = $.extend({
        language: 'ru',
        text: this.attr('data-text')
    }, options);

    var make = function () {
        var el = $(this);
        $.ajax({
            url: options.language + '.json',
            dataType: 'json',
            success: function (data) {
                var html = data[options.text];

                if ($.isFunction(options.callback)) {
                    options.callback(html);
                } else {
                    el.html(html);
                }
            }
        });
    };

    return this.each(make);
};

var wrapper = $('<div><i>Blah</i> <span>replaced</span> <b>Blah</b></div>');

wrapper.setLanguage({
    text: 'login_error',
    callback: $.proxy(function (html) {
        $(this).find('span').html(html);
    }, wrapper),
});

$('body').append(wrapper);

А еще лучше, конечно, сделать свое событие и слушать его.

Ну а вообще можно и не делать ajax-запрос делать. Проще получить объект переводов при старте страницы один раз и работать дальше с ним. Тогда и проблемы асинхронности не станет.

Comments

[Ivan Kashmir]

Ваш вариант более гибкий. Но все равно не удобно. Нужно каждый раз искать селектор

[Алексей Уколов]

Что неудобно? Какой селектор? Весь смысл гибкости в том, что для каждого случая можно написать свою логику. Ну или не передавать callback, если нужно просто вставить текст.
Опишите свою задачу нормально, если мое решение под нее не подходит.

[Ivan Kashmir]

Ваш метод гибок! Но можно ли сделать так var element = $('[span]'+ здесь_текст_из_json +'[span]'); Тоесть вставлять текст при создании элемента. Так быстрее и меньше кода

[Алексей Уколов]

Нельзя так сделать, ajax выполняется асинхронно, а код создания элемента - синхронный. Проще вы никак не сделаете.

[Алексей Уколов]

Хотя, что вот это такое я вообще не понял: var element = $('[span]'+ здесь_текст_из_json +'[span]');

[Ivan Kashmir]

Режет теги в комментариях. Но уже не важно. Буду сразу получать обьект и уже работать с ним. Так действительно проще. Чегото не подумал так сразу. Спасиба Вам!