63495


[この質問](https://ja.stackoverflow.com/questions/63000/google-
spreadsheet%e3%81%ae%e5%86%85%e5%ae%b9%e3%82%92%e5%a4%96%e9%83%a8%e3%81%aehtmlwikidot%e3%81%ab%e8%a8%98%e8%bf%b0%e3%81%99%e3%82%8b)にて以前,Wikidotの方にGASからAPIを使用して内容を記述する方法をお教えいただいたのですが、それ等を使って実現することができないと考え、  
スプレッドシートの内容を配列にするところまではできたのですが、その配列からjsonに変換することが出来ずにいます。  
jsonに変換ができたならば、

[code]

    return ContentService.createTextOutput(JSON.stringify(dataArray))
        .setMimeType(ContentService.MimeType.JSON);
    
[/code]

GASの方でAPIにして  
外部htmlの方でFetch APIでjsonデータを取得できると考えております。  
そのjsonデータを

[code]

     translater_name title                           Reservation_date   End_date          User_UNIX User_ID
     XXXXXXXXXXXXX   http://www.XXX.com/xxxxxxxxxxxx 29 Feb 2020 15:00  29 Feb 2020 15:00 XXXXXX    111111
    
[/code]

というふうにテーブルにしたいと思っています。  
お手すきの際に可能であれば、お答えいただければ幸甚です。  
よろしくお願いいたします。

* * *

以下、GASのcode

[code]

    function doGet() {
    
      var sheet = SpreadsheetApp.getActive().getSheetByName("Reservation");
    
      var dataArray = convSheet(sheet);
    
      //dataをJsonに変換し、新規シート出力
     }
    
    //data（配列）へ変換関数
     function convSheet(sheet) {
       var sheet = SpreadsheetApp.getActive().getSheetByName("Reservation");
      //内容開始行番号
      var rowIndex=2;
      //列開始行番号
      var colStartIndex = 1;
      //行番号
      var rowNum = 1;
      //最初行領域
      var lastclomn =sheet.getLastColumn();
    
      var firstRange = sheet.getRange(1, 1, 1, 6);
       Logger.log('firstRange:'+JSON.stringify(firstRange));
      var firstRowValues = firstRange.getValues();
       Logger.log('firstRowValues:'+JSON.stringify(firstRowValues));
      //項目情報取得
      var titleColumns = firstRowValues[0];
      Logger.log('titleColumns: '+titleColumns);
    
      var index_translater_name = titleColumns.indexOf('translater_name');
      var index_title = titleColumns.indexOf('title');
      var index_Reservation_date = titleColumns.indexOf('Reservation_date');
      var index_End_date = titleColumns.indexOf('End_date');
      var index_User_UNIX = titleColumns.indexOf('User_UNIX');
      var index_User_ID = titleColumns.indexOf('User_ID');
       Logger.log('index_translater_name: '+index_translater_name+'  '+'index_title: '+index_title+'  '+'index_Reservation_date: '+index_Reservation_date+'  ' +'index_End_date: '+index_End_date+'  '+'index_User_UNIX: '+index_User_UNIX+'  '+'index_User_ID:'+index_User_ID);
      var exceptIndexArray =[index_translater_name,index_title,index_Reservation_date,index_End_date,index_User_UNIX,index_User_ID];
      Logger.log('exceptIndexArray: '+exceptIndexArray);
    
      //最後の行番号
      var lastRow = sheet.getLastRow();
       Logger.log('lastRow:'+JSON.stringify(lastRow));
      //内容情報取得配列
      var rowValues = [];
      //内容取得
      for(rowIndex; rowIndex<=lastRow; rowIndex++) {
        var range = sheet.getRange(rowIndex, colStartIndex, rowNum, 6);
        var values = range.getValues();
        //内容情報にPUSH
        rowValues.push(values[0]);
      }
       Logger.log('rowValues:'+JSON.stringify(rowValues));
    
    
      //Json形式配列
      var dataArray = [];
      for(var i=0; i<rowValues.length; i++) {
        //内容の行情報
        var line = rowValues[i];
        //JsonObject
        var json = new Object();
    
        //残りJson作成
        for(var j=0; j<titleColumns.length; j++) {      
            json[titleColumns[j]] = line[j];
        }
        //data格納
        dataArray.push(json);
      }
      //「dataArray」ログ確認
      Logger.log(dataArray);
      return dataArray;
     }
    
    function doGetjson(request) {
      return ContentService.createTextOutput(JSON.stringify(dataArray))
        .setMimeType(ContentService.MimeType.JSON);
    }
    
[/code]

* * *

GAScode最終部分のloger.log(dataArray)の出力内容

[code]

    [{User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, {User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, {User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, {User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, {User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, {User_UNIX=XXXXXX, translater_name=xxxxxxx, End_date=29 Feb 2020 15:00, title=http://www.XXX.com/xxxxxxxxxxxx, Reservation_date=29 Feb 2020 15:00, User_ID=1111111}, ]
    
[/code]

* * *

wikidot側のsource

[code]

    [[html]]
    <div id="json_disp"></div>
    <script type="text/javascript">
    const url ="https://script.google.com/macros/s/XXXXXXXXXXXXXXXXXXXX/exec"
     fetch('url', {
       method: 'GET'
     }).then(function (response) {
       return response.json();
     }).then(function (myjson) {
    
    //3:json形式のデータをWebページに出力する
      makeTable(myjson);
    });
    
    function makeTable(jsonlist) {
      var table_wrap = document.getElementById("json_disp");
      var table = "<table>";
      table += "<th>translater_name</th><th>title</th><th>Reservation_date</th><th>End_date</th><th>user_unix</th>";
      //------------
      for (var i = 0; i < jsonlist.length; i++) {
        var linedata = jsonlist[0];
        table += "<tr>";
        table += "<td>" + jsonlist[i].translater_name + "</td>" + "<td>" + jsonlist[i].title + "</td>" + "<td>" + jsonlist[i].Reservation_date + "</td>" + "<td>" + jsonlist[i].End_date + "</td>" + "<td><span class=¥"printuser avatarhover¥"><a href=¥"http://www.wikidot.com/user:info/" + jsonlist[i].User_UNIX+ "¥"><img class=¥"small¥" src=¥"http://www.wikidot.com/avatar.php?userid="+ jsonlist[i].User_ID +"¥" alt=¥""+jsonlist[i].User_UNIX+"¥" style=¥"background-image:url(http://www.wikidot.com/userkarma.php?u="+jsonlist[i].User_ID+")¥"></a><a href=¥"http://www.wikidot.com/user:info/"+jsonlist[i].User_UNIX+"¥">"+jsonlist[i].User_UNIX+"</a></span></td>";
        table += "</tr>";
      }
      //-----------
      table += "</table>";
      //要素に追加
      table_wrap.innerHTML = table;
    }
    </script>
    
    [[/html]]
    
[/code]


CC BY-SA 4.0
2020-02-28T16:21:38.927
63440
2020-03-02T10:40:59.867
37812
question
javascript html google-apps-script google-spreadsheet
GASでの2次配列からjsonに変換し、そのjsonデータを外部のhtmlにAPIで通してそのhtml内でテーブルにしたい。


あまりよく分かっていませんが、簡単に見た感じ数や文字列のみの配列 `rowValues`（あるいは Object の配列 `dataArray`？）を
JSON にするのであれば、単に `{ data: rowValues }` のように、唯一の要素がその配列であるような JSON
を作れば良いのではないかと思いました。

<https://www.json.org/json-ja.html>


CC BY-SA 4.0
2020-03-02T10:40:59.867
63495
2020-03-02T10:40:59.867
19110
63440
answer