Built simple table from json via ajax

table-from-ajax-json.es6

(() => {'use strict';

    let table, tr, td, div, _el, cl;
    document.body.innerHTML = 'loading...';
    $.get('http://yitv.herokuapp.com')
    .then((data) => {
        let rows = data.body.reduce((prev, item)=>{
            let title = div(item.title, 'title');
            let vals = div(item.add_values.join(', '));
            let row = td(item.value, 'value') + td(title + vals, null, { title: item.detail });

            return prev + tr(row);
        }, '');
        document.body.innerHTML = table(rows, 'crouton');
    });

    _el = (name, content, className, extra) => {
        if (className) {
            extra || (extra = {});
            extra.class = className;
        }
        let extraPrint = extra && Object.keys(extra).reduce((prev, key) => {
            return `${ prev } ${ key }="${ extra[key] }"`;
        }, ' ') || '';
        let tpl = `<${name}${ extraPrint }>${content}</${name}>`;
        
        return tpl;
    };
    table = _el.bind(null, 'table');
    tr = _el.bind(null, 'tr');
    td = _el.bind(null, 'td');
    div = _el.bind(null, 'div');

})();

data:text/html,<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>