プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ

JSONの表記とJQuery

JSONとは

JavaScript Object Notationの略。
一言で言うと、わかりやすく簡単なデータ記述言語。
WEB APIでのデータの送受信などにJSONフォーマットが使われる。

Web API とは

Application Programming Interface(アプリケーション・プログラミング・インターフェース)の略。
「Webサービスをプログラミングから操作するための方法」という意味。

JSONデータの表記例

変数に表記する

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script type="text/javascript">
        let data = {
        'name': '田中',
        'age': 21
        }
        //JSONデータをalertを使って表示させる
        alert('名前:' + data.name + ' 年齢:' + data.age);
        </script>
    </body>
</html>

いくつかのデータを入れて一つずつ取り出す

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    </head>
    <body>
        <script type="text/javascript">
            function func() {
                let data = {
                    "name": "佐々木",
                    "gender": "male",
                    "city": "Tokyo"
                };
                //JSONデータをalertを使って表示させる
                alert(data.name);
                alert(data.gender);
                alert(data.city);
            }
            func();
        </script>
    </body>
</html>

複数のデータを格納する

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
    <ul id="output">
        <script>
            // 配列として扱う
            let data = [
                {'name': '田中', 'age': 18 },
                {'name': '山田', 'age': 19 },
                {'name': '斉藤', 'age': 20 },
                {'name': '佐藤', 'age': 21 },
            ]
            for(let i in data){
                $("#output").append("<li>" + data[i].name + "【" + data[i].age + "】</li>");
            }
        </script>
    </ul>
</body>
</html>