Tryit demo

We are going to demo some lodash functions

We are per created an array words press Run button to execute

 let words = ['sky', 'wood', 'forest', 'falcon', 
    'pear', 'ocean', 'universe'];

Using some lodash functions 1 _

_.first
_.last

Let's add some HTML

We use the $$.HTML function to do this. The other $$ functions are:

$$.display(value)
$$.clear()
$$.D2('eval-string') eval-string is a javascript expression in string from, the eval string and its value is displayed. This is useful for displaying variables name and value.
$$.HTML(somehtmlstring) - render html in the display area
$$.lastly( some-function ) - this will be executed after all the display rendering is completed

$$.lastly( // code is activated after all data/html display has been performed 
      () => {
          $('.ui .card')
            .popup({
              hoverable  : true,
              position   : 'bottom left'
              });

}
); // activate popup after we have displayed the HTML below

// Display some HTML using $$.HTML(...)
$$.HTML(
`<div class="ui card" data-html="<div class='header'>User Rating</div><div class='content'><div class='ui star rating'><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i><i class='active icon'></i></div></div>">
  <div class="image">
    <img src="https://semantic-ui.com/images/movies/totoro-horizontal.jpg">
  </div>
  <div class="content">
    <div class="header">My Neighbor Totoro</div>
    <div class="description">
      Two sisters move to the country with their father in order to be closer to their hospitalized mother, and discover the surrounding trees are inhabited by magical spirits.
    </div>
  </div>
  <div class="ui two bottom attached buttons">
    <div class="ui button">
      <i class="add icon"></i>
      Queue
    </div>
    <div class="ui primary button">
      <i class="play icon"></i>
      Watch
    </div>
  </div>
</div>`
)

Array

Customize your display

For this test me are just going to convert to JSON string

Section 1

label 1a

label 1b

label 1c

label 1d

label 1e

label 1f

label 1g

Section 2

label 2a

label 2b

label 2c

label 2d

label 2e

label 2f

label 2g

Section 3

label 3a

label 3b

label 3c

label 3d

label 3e

label 3f

label 3g

Section 4

label 4a

label 4b

label 4c

label 4d

label 4e

label 4f

label 4g

Section 5

label 5a

label 5b

label 5c

label 5d

label 5e

label 5f

label 5g

Section 6

label 6a

label 6b

label 6c

label 6d

label 6e

label 6f

label 6g