frontend/bundle.js

$(function() {
  $('#word').each(function(index, elem) {
    $.getJSON(
      'http://localhost:4567/words/' + $(elem).data('id'),
      function(data) {
        var primary_form   = data['primary_form']
        var part_of_speech = data['part_of_speech']
        var commentary     = data['commentary']

        var translations = []
        data['translations'].forEach(function(item) {
          var commentary = ''
          if (item['commentary']) {
            commentary = ' (' + item['commentary'] + ')'
          }
          translations.push(
            '<li>' + item['translation'] + commentary + '</li>'
          )
        })

        var inflections = []
        data['inflections'].forEach(function(item) {
          var descr = item['descr']
          var value = item['value'] || ''
          inflections.push(
            '<li><b>' + descr + '</b>: ' + value + '</li>'
          )
        })

        var examples = []
        data['examples'].forEach(function(item) {
          var left       = item['left']
          var right      = item['right']
          var highlights = item['highlights']

          var highlighted = []
          if (highlights.length == 0) {
            highlighted.push(left)
          } else {
            var last_pos = 0
            highlights.forEach(function(highlight) {
              var pos = highlight['pos']
              var len = highlight['len']
              if (pos > 0) { highlighted.push(left.substring(last_pos, pos)) }
              last_pos = pos + len
              highlighted.push(
                '<span class="highlight">' +
                  left.substring(pos, pos + len) +
                  '</span>'
              )
            })
          }

          examples.push(
            '<li>' + highlighted.join('') + ' &mdash; ' + right + '</li>'
          )
        })

        $('#primary-form').text(primary_form)
        $('#part-of-speech').text(part_of_speech)

        if (commentary) {
          $('#commentary-data').text(commentary)
          $('#commentary').removeClass('invisible')
        }

        if (translations.length > 0) {
          $('#translations-data').html('<ol>' + translations.join('') + '</ol>')
          $('#translations').removeClass('invisible')
        }

        if (inflections.length > 0) {
          $('#inflections-data').html('<ul>' + inflections.join('') + '</ul>')
          $('#inflections').removeClass('invisible')
        }

        if (examples.length > 0) {
          $('#examples-data').html('<ul>' + examples.join('') + '</ul>')
          $('#examples').removeClass('invisible')
        }
      },
    )
  })
})