JavaScript - Data Structures(Filtering Records)

Exercises for Programmers

開発環境

• OS X El Capitan - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• Safari(Web browser)
• 参考書籍
  • JavaScript 第6版 (David Flanagan(著)、村上 列(翻訳)、オライリージャパン)
  • JavaScriptリファレンス 第6版(David Flanagan(著)、木下 哲也(翻訳)、オライリージャパン)

Exercises for Programmers: 57 Challenges to Develop Your Coding Skills (Brian P. Hogan 著、Pragmatic Bookshelf)のChapter 7(Data Structures)、40(Filtering Records)を取り組んでみる。

40(Filtering Records)

コード(Emacs)

HTML5

<label for="sort0">field: </label>
<select id="search0">
  <option value="name">the first or last name</option>
  <option value="pos">position</option>
</select>
<label for="string0">Enter a search string: </label>
<input id="string0" type="text" value="Jac">
<br>
<div id="output0"></div>

<script src="sample40.js"></script>

JavaScript

(function () {
    'use strict';
    var dataset,
        first_names,
        header = ['Name', 'Position', 'Separation Date'],
        input_search = document.querySelector('#search0'),
        input_string = document.querySelector('#string0'),
        inputs = [input_search, input_string],
        div_output = document.querySelector('#output0'),
        output;

    dataset = {
        John: {
            'Last Name': 'Johnson',
            'Position': 'Manager',
            'Separation date': new Date(2016, 11, 31),
        },
        Tou: {
            'Last Name': 'Xialong',
            'Position': 'Software Engineer',
            'Separation date': new Date(2016, 9, 5),
        },
        Michaela: {
            'Last Name': 'Michaleson',
            'Position': 'District Manager',
            'Separation date': new Date(2015, 11, 19),
        },
        Jake: {
            'Last Name': 'Jacobson',
            'Position': 'Programmer',
        },
        Jacquelyn: {
            'Last Name': 'Jackson',
            'Position': 'DBA',
        },
        Sally: {
            'Last Name': 'Weber',
            'Position': 'Web Developer',
            'Separation date': new Date(2015, 11, 18),
        },
    };
    first_names = Object.keys(dataset);
    first_names.sort();
    output = function () {
        var search = input_search.value,
            string = input_string.value.toLowerCase(),
            matches = [],
            result = '';

        if (search === 'name') {
            matches =
                first_names.filter(
                    function (first) {
                        return first.toLowerCase().indexOf(string) !== -1 ||
                            dataset[first]['Last Name']
                            .toLowerCase().indexOf(string) !== -1;
                    });
        } else if (search === 'pos') {
            matches =
                first_names.filter(
                    function (first) {
                        return dataset[first]['Position']
                            .toLowerCase()
                            .indexOf(string) !== -1;
                    });
        }
        result += '<table border="1">'
        result += '<tr><th>' + header.join('</th><th>') + '</th></tr>';
        result += '<tr>';
        result += matches.map(function (first) {
            var employee = dataset[first];

            return '<td>' +
                [
                    first + ' ' + employee['Last Name'],
                    employee['Position'],
                    employee['Separation date'] === undefined ? '':
                        employee['Separation date']
                        .toISOString()
                        .slice(0, 10)
                ]
                .join('</td><td>') + '</td>';

        }).join('</tr><tr>');
        result += '</tr>';
        result += '</table>';

        div_output.innerHTML = result;
    };
    inputs.forEach(function (input) {
        input.onchange = output;
    });
    output();
}());

field: the first or last name position Enter a search string: