# kintoneでスペースフィールドに追加するテーブル要素をkintoneライクにする際に、テーブルの行数（データ数）をデータ数に応じて表示させる方法

**URL:** <https://community.cybozu.dev/t/topic/9182>\
**Category:** kintone 開発相談\
**Created:** [2024 年 6 月 17 日午前 5:51 UTC](https://community.cybozu.dev/t/topic/9182 "2024-06-17T05:51:21Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![nor](https://avatars.discourse-cdn.com/v4/letter/n/a9a28c/32.png) [@nor](https://community.cybozu.dev/u/nor)\
**Post date:** [2024 年 6 月 17 日午前 5:51 UTC](https://community.cybozu.dev/t/topic/9182/1 "2024-06-17T05:51:21Z")

</div>

### 何を実現したいのかを書きましょう

> [@外部のAPIで取得した結果をデータ更新せずに、詳細画面のテーブルに表示したい](https://community.cybozu.dev/t/topic/9126/1):
>
> 実現したいこと 取引先アプリの詳細画面を表示した際に、 別のツールから商談情報を取得して、リアルタイムで、その詳細画面に表示されている A社の商談情報を0~5行のテーブルで取得し、 kintone上のデータは更新せずに、 取引先アプリで、APIで取得できた0~5件の商談データをテーブルに表示したいのですが、可能でしょうか？ 最小で0件、最大5件の商談データを取得する予定です。 フォーム上…

の続きで、JSでテーブルを作成し、値を設定したいです。  
テーブルに表示するデータは、APIで取得し、  
詳細ページごとに、件数が違います。

データ数に合わせて、

> **[Table | kintone UI Component](https://ui-component.kintone.dev/docs/components/desktop/table/)**
>
> Overview

の以下の部分を設定する方法を教えていただきたいです。

```javascript
  data: [
    {
      name: 'john',
      age: 32,
      address: 'New York No. 1 Lake Park'
    },
    {
      name: 'steven',
      age: 22,
      address: 'New York No. 2 Lake Park'
    }
  ],

```

テーブルに表示するデータの中身を以下のようにAPIで取得して  
配列にセットしています。

```javascript
Deal_Name = ['契約1', '契約2', '契約3'];
Owner = ['Aさん', 'Bさん', 'Cさん'];
Closing_date = ['2024-08-31', '2024-05-31', '2023-05-31']; 

```

テーブル表示を件数に応じて、データをセットさせるにはどのようにJSを記述したら良いでしょうか？

以下のようにコードを書いてみました。  
TableDealInfo に 上記の data の中身を文字列でセットしてみましたが、  
そのデータをベタ書きで設定すれば、表示されるのですが、  
文字列ではうまくいきませんでした。（テーブルの中身が表示されない）  
プログラミングがあまり得意ではないので、  
うまい書き方があれば教えていただきたいです。

```javascript
 // テーブルに取得した値を表示
const Kuc = Kucs['1.17.1'];
// 要素ID「Deals」のスペースに表示する
const space = kintone.app.record.getSpaceElement('Deals');

let TableDealInfo = "";
            for(let i=0; i < Deal_Name.length; i++) {
               TableDealInfo = TableDealInfo +"{ type:'" + Deal_Name[i] + "', owner: '" + Owner[i] + "', closing_date: '" + Closing_Date[i] + "'}";
               if(i < Deal_Name.length - 1){
                 TableDealInfo = TableDealInfo + ",";
               }
            }

const table = new Kuc.Table({
                label: 'APIで取得した商談情報',
                columns: [
                  {
                    title:'商談種類',
                    field: 'type'
                  },
                  {
                    title: '商談担当者',
                    field: 'owner'
                  },
                  {
                    title: '完了予定日',
                    field: 'closing_date'
                  }   
                ],
                data: [
                  TableDealInfo
                ],
                className: 'options-class',
                id: 'options-id',
                actionButton: true,
                headerVisible: true,
                visible: true
              });
              
              space.appendChild(table);
              
              table.addEventListener('change', event => {
                console.log(event);
              });
            

```

---

<div class="post-metadata">

**Author:** ![TaroTanaka](https://sea1.discourse-cdn.com/flex015/user_avatar/community.cybozu.dev/tarotanaka/32/985_2.png) [@TaroTanaka](https://community.cybozu.dev/u/TaroTanaka)\
**Post date:** [2024 年 6 月 18 日午前 10:50 UTC](https://community.cybozu.dev/t/topic/9182/2 "2024-06-18T10:50:23Z")

</div>

のんさん、こんちには！

のんさんが、会社で使うアプリを作成されているのか、  
個人で使われるアプリを作成されているのかで、異なるのですが、  
前者の場合、  
こちらで書き方を教えてもらって、  
「あまりよくわからないですが、表示できました。」は  
kintone自体の動作を壊してしまう可能性もあるため、お勧めできません。

jsカスタマイズをされるのであれば、  
プログラムについてもある程度理解されて、書かれるのが良いかと思います。

その上でになりますが、おそらく以下の内容がいまいち理解できていないのかなと思いますので、最短経路だと、以下の3つについて上から順番にGoogle等で調べて理解を試みるのが良いかと思います。  
「js Array」  
「js Object」  
「js オブジェクトの配列 操作」

上記調べてみて、理解が難しいと感じましたら、  
今はプログラム（JS）についてほぼ無料で学習できるサイトが多くありますので、そちらで学習されるのも良いかもしれません。

頑張ってください。

---

<div class="post-metadata">

**Author:** ![nor](https://avatars.discourse-cdn.com/v4/letter/n/a9a28c/32.png) [@nor](https://community.cybozu.dev/u/nor)\
**Post date:** [2024 年 6 月 19 日午前 5:18 UTC](https://community.cybozu.dev/t/topic/9182/3 "2024-06-19T05:18:42Z")

</div>

田中様

教えていただきありがとうございました。  
js オブジェクト配列について、調べてみて、オブジェクト配列の操作の理解ができ、簡潔なコードにて、動作するようになりました。  
ありがとうございました。

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex015/uploads/cybozu/original/1X/d5c841c3c5a6cb66eed514001c1b45147c9e1f4f.png) [@system](https://community.cybozu.dev/u/system)\
**Post date:** [2024 年 6 月 22 日午前 5:19 UTC](https://community.cybozu.dev/t/topic/9182/4 "2024-06-22T05:19:15Z")

</div>

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。