LANG SELRCT

コードを書く場所についてはこちら

2018年5月7日月曜日

改行で区切った文字列からJSON形式の文字列を作成する


テキストを入力して
JSON作成ボタンをクリックしたら
JSON文字列が作成される




というアプリケーション







コード.gs
function doGet() {
  return HtmlService.createHtmlOutputFromFile("index");
}
意訳
この機能がやること
指定したHTMLファイルを表示する




index.html
<!DOCTYPE html>
<html>
<head>
  <style>
    .ta {
      width: 360px;
      height: 120px;
    }
  </style>
</head>
<body>
  <textarea id="input_text" class="ta"></textarea><br>
  <button id="create_json_bt">JSON作成</button><br>
  <textarea id="json_text" class="ta"></textarea><br>
  <script>
    var input_text = document.getElementById("input_text");
    var json_text = document.getElementById("json_text");
    var create_json_bt = document.getElementById("create_json_bt");
    create_json_bt.onclick = create_json_bt_clicked;

    function create_json_bt_clicked() {
      var text = input_text.value;
      var text_split = text.split("\n");
      var array = [];
      for (var i = 0; i < text_split.length; i++) {
        var obj = {}
        obj["text"] = text_split[i];
        array.push(obj);
      }
      var json = JSON.stringify(array);
      json_text.value = json;
    }
  </script>
</body>
</html>
意訳
 



taのスタイル
幅
高さ




入力エリア
JSON作成ボタン
JSON出力エリア

idがinput_textの要素を取得する
idがjson_textの要素を取得する
idがcreate_json_btの要素を取得する
create_json_btがクリックされたらcreate_json_bt_clickedを実行する

この機能がやること
input_textの値を取得して
改行で区切って
結果を入れる配列を用意して
区切った値の数だけ以下を繰り返す
オブジェクトの入れ物を用意して
{"text": text_split[i]の値}を作って
arrayに追加する

arrayをJSONに変換して
JSONの出力エリアに入れる