simplestarの技術ブログ

目的を書いて、思想と試行、結果と考察、そして具体的な手段を記録します。

Webページからオブジェクトをjson文字列に変換してPOST

■前置き
Webページから文字列をPOSTする際、クエリストリングのように連想配列を文字列で送信できることは確認済み
さて、ユーザーアクティビティってのはそう単純なデータ構造じゃないんです。
ユーザ定義のデータ構造の配列の配列なんてこともあって、これをPOSTできるんでしょうか?

普通、こうした複雑なデータ構造は一度形式だった文字列に変換するということが、Webの通信では通例なようで
jsonフォーマットの文字列というものがあります。例えば次のような文字列

{
    "id": "0000",
    "str": "hello",
    "CustomType": [
        {
            "you": "are",
            "c": "t"
        },
        {
            "you": is,
            "c": "hoge"
        }
    ]
}

javascript ではオブジェクトから json 文字列にシリアライズしたり
json文字列からデシリアライズしたりするんじゃないですかね?

やったことないですが、推理です。
json文字列へのシリアライズ、デシリアライズについて javascript の書式を知りたいです。

■本題

あった

JavaScript 値を JSON (JavaScript Object Notation) 文字列に変換
JSON.stringify 関数 (JavaScript)

JSON (JavaScript Object Notation) 文字列をオブジェクトに変換
JSON.parse 関数 (JavaScript)

POSTで送信したい情報があったら、次のようにすることで json 文字列を送信することを確認しました。

            let jsonStr = JSON.stringify(obj);
            xhr.send(jsonStr);

試しに、適当に複雑化したオブジェクトを JSON.stringify に突っ込んでみて、どのような json 文字列が作られるのか見てみました。

        var obj = {
            obj2: {
                a : 1,
                b : 2,
                array : Array
            },
            obj3: {
                c : 3,
                d : 4
            }
        };
        var Animal = (function () {
            function Animal() {
                this.test = "hoge";
            }
            this.test = "test";
            this.pageX = 0;
            this.pageY = 0;
            this.identifier = 0;
            return Animal;
        })();

            let touchList = new Array();
            let touch = new Animal();
            touch.pageX = 101;
            touch.pageY = 102;
            touch.identifier = 321;
            touchList.push(touch);
            let touch2 = new Animal();
            touch2.pageX = 201;
            touch2.pageY = 202;
            touch2.identifier = 987;
            touchList.push(touch2);
            obj.obj2.array = touchList;

            let jsonStr = JSON.stringify(obj);
            console.log(jsonStr);

            xhr.send(jsonStr);

JavaScript 側でコンソール出力を見てみると次の json 文字列を取得し
{"obj2":{"a":1,"b":2,"array":[{"test":"hoge","pageX":101,"pageY":102,"identifier":321},{"test":"hoge","pageX":201,"pageY":202,"identifier":987}]},"obj3":{"c":3,"d":4}}

goで書いたAPIサーバにて受け取った文字列を見てみると次の通りでした。
{"obj2":{"a":1,"b":2,"array":[{"test":"hoge","pageX":101,"pageY":102,"identifier":321},{"test":"hoge","pageX":201,"pageY":202,"identifier":987}]},"obj3":{"c":3,"d":4}}

まったく一緒です。

なお見通しがきくように javascript 側と go サーバ側を次のように書き換えてみました。

            let jsonStr = JSON.stringify(obj);
            var params = "json=" + jsonStr;
            xhr.send(params);
	form := r.PostForm
	output := fmt.Sprintf("%s", form["json"][0])
	file.Write(([]byte)(output))

ファイルには json 文字列が間違いなく出力されていました。

これにてWebページからオブジェクトをjson文字列に変換してPOST成功を確認