JavaScript - Working with External Services(Who's in Space?)

Exercises for Programmers

開発環境

• macOS Sierra - Apple (OS)
• Emacs (Text Editor)
• JavaScript (プログラミング言語)
• JavaScript Library
  • jQuery
• 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 9(Working with External Services)、47(Who's in Space?)を取り組んでみる。

47(Who's in Space?)

コード(Emacs)

HTML5

<div id="output0">取得中…</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

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

JavaScript

{
    'use strict';
    let url = 'http://api.open-notify.org/astros.json',
        $div_output = $('#output0');

    $.getJSON(url, (json) => {
        let people = json.people,
            space = {};

        people.forEach((person) => {
            let craft = person.craft;

            if (space[craft] === undefined) {
                space[craft] = [person.name];
            } else {
                space[craft].push(person.name);
            }
        });
        let crafts = Object.keys(space);
        let output = '<table border="1"><tr><th>Name</th><th>Craft</th></tr>';
        crafts.sort();
        crafts.forEach((craft) => {
            let names = space[craft];
            
            names.sort((name1, name2) => {
                let last1 = name1.split(' ').pop(),
                    last2 = name2.split(' ').pop();

                return last1 < last2 ? -1 : last1 === last2 ? 0 : 1;
            });
            output += `<tr><td>${names[0]}</td>` +
                `<td colspan="${names.length}">${craft}</td></tr>`;
            names.slice(1).forEach((name) => {
                output += `<tr><td>${name}</td></tr>`;
            });
        });
        output += '</table>';
        $div_output.html(output);
    });
}

取得中…

ローカル(file://)で Safari だと 同一生成元ポリシー(The Same Origin Policy)に引っかからないけど、ブログだと引っかかるのうっかり忘れてた。localでも、http://なら Safariでも取得できない。一応 python3 -m http.server で確認。Firefox、Chromeとかは 「file://」でも取得できないみたい。

ということで、修正、書き換え。

コード(Emacs)

HTML5

<div id="output1">取得中…</div>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

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

JavaScript

{
    'use strict';
    let url = 'http://api.open-notify.org/astros.json',
        $div_output = $('#output1');

    $.ajax({
        type: 'get',
        url: url,
        dataType: 'jsonp',
        success: (json) => {
            let people = json.people,
                space = {};

            people.forEach((person) => {
                let craft = person.craft;

                if (space[craft] === undefined) {
                    space[craft] = [person.name];
                } else {
                    space[craft].push(person.name);
                }
            });
            let crafts = Object.keys(space);
            let output = '<table border="1"><tr><th>Name</th>' +
                '<th>Craft</th></tr>';
            crafts.sort();
            crafts.forEach((craft) => {
                let names = space[craft];
                
                names.sort((name1, name2) => {
                    let last1 = name1.split(' ').pop(),
                        last2 = name2.split(' ').pop();

                    return last1 < last2 ? -1 : last1 === last2 ? 0 : 1;
                });
                output += `<tr><td>${names[0]}</td>` +
                    `<td colspan="${names.length}">${craft}</td></tr>`;
                names.slice(1).forEach((name) => {
                    output += `<tr><td>${name}</td></tr>`;
                });
            });
            output += '</table>';
            $div_output.html(output);
        },
    });
}

取得中…