ABBYY Lingvo API, как разобрать JSON ответ на jQuery

198
20 декабря 2019, 18:30

Запросив через ABBYY Lingvo API полный перевод слова, мы получаем словарную статью в формате JSON, и сразу кажется, что трудностей с его прочтением не возникнет, но при попытке его разобрать оказывается, что состав и порядок объектов внутри присланных словарей всегда разный, а сам ответ очень длинный. Его длину и структуру можно оценить глядя на пример в официальной документации.

Вопрос: Как отобразить эту кашу из объектов в удобном для пользователя виде? Так как сервер ABBYY довольно медлителен и ответа приходится ждать больше секунды - возникает необходимость показать своим пользователям сразу свою страницу сайта, а ответ от ABBYY получить с помощью AJAX и разобрать уже в браузере.

Answer 1

Если долго вглядываться в ответ сервера, то можно найти сходство сруктуры ответа и словарной статьёй на самом сайте ABBYY. Получается, что если каждый объект превратить в соответствующий тег, то можно получить такую-же структуру у себя на сайте. Но так, как почти любой из объектов может содержать массив с аналогичных объектов, и внутри ещё массив объектов и т. д., то нам понадобится рекурсивная функция и array.forEach()

И так, готовое решение может быть таким:

var response = JSON.parse(data);
var html = '';
function recursive_reading(item) {
    var attr = '';
    var style = '';
    var tag = '';
    //Готовим подсказку, если есть
    if (item.FullText) attr += ' title="'+item.FullText+'"';
    //Присоседиваем доп данные, если есть
    if (item.FileName) attr += ' data-file="'+item.FileName+'"';
    //Обозначаем тип узла и открываем тег
    switch (item.Node) {
        case 'Text':
            //Готовим дополнительное оформление, если есть
            if (item.IsAccent) style += 'font-weight:bold;';
            if (item.IsItalics) style += 'font-style:italic;';
            if (style) style = ' style="'+style+'"';
            tag = 'span';
        break;
        case 'CardRef':
            tag = 'a'
            attr += ' href="?w='+item.Text+'"'
        break;
        case 'Abbrev':
            tag = 'abbr';
        break;
        case 'List':
            tag = 'ol';
        break;
        case 'ListItem':
            tag = 'li';
        break;
        default:
            tag = 'div';
            attr += ' class="'+item.Node+'"';
    }
    html += '<'+tag+attr+style+'>';
    //Пишем текст узла, если есть
    if (item.Text) html += item.Text;
    //Углубляемся на следующий уровень, если есть
    if ('Markup' in item) {
        item.Markup.forEach(function(item) {
            recursive_reading(item);
        });
    }
    //Углубляемся на следующий уровень, если есть
    if ('Items' in item) {
        item.Items.forEach(function(item) {
            recursive_reading(item);
        });
    }
    //Закрываем тег
    html += '</'+tag+'>';
}
response.forEach(function(item) {
    html += '<div class="dictionary">';
    html += '<h3>'+item.Dictionary+'</h3>';
    html += '<h4>'+item.Title+'</h4>';
    item.Body.forEach(function(item) {
        recursive_reading(item);
    });
    html += '</div>';
});
//Вывод результата
$('#dictionary_entry').html(html);
READ ALSO
ScrollMagic не может работать с GSAP?

ScrollMagic не может работать с GSAP?

Всем привет, я пытаюсь научиться анимации по скроллу и хочу попробовать для этого ScrollMagic совместно с GSAP, но у меня не получается даже скомпилировать...

198
Массив уникальных массивов. JavaScript

Массив уникальных массивов. JavaScript

Есть некий скрипт сбора координат вида [2,1] в массивКоординаты могут повторяться, но итоговый массив должен содержать только уникальные координаты

171
vue js Поиск внутри массива

vue js Поиск внутри массива

Есть массив объектов:

211
Slick slider плавная прокрутка

Slick slider плавная прокрутка

Есть слайдер с 4-мя картинками, когда мышкой хочешь листать например прокрутил на 3 картинки вперед, все равно прокручивается только на один,...

648