# 一覧画面で条件で絞り込みした合計値をヘッダーに出す方法

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

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 6 月 8 日午前 5:55 UTC](https://community.cybozu.dev/t/topic/6428/1 "2020-06-08T05:55:01Z")

</div>

一覧画面のヘッダ部分に，  
現在絞り込み表示されているレコードのうち，さらに「済」チェックボックスがtrue（済）になっているレコードの金額合計を表示したいです。  
以下からさらに「済」について記述する方法がわかりません。  
ご教示いただけないでしょうか。

```
(function() {
"use strict";
var getRecords = function(app, tmpRecords){
var limit = 500;
var tmpRecords = tmpRecords || [];
return kintone.api(kintone.api.url('/k/v1/records', true), 'GET', {
app: app,
query: 'limit ' + limit +' offset ' + tmpRecords.length
}).then(function(response){
tmpRecords = tmpRecords.concat(response.records);
return response.records.length === limit ? getRecords(app, tmpRecords) : tmpRecords;
});
}
kintone.events.on('app.record.index.show', function(event){
getRecords(kintone.app.getId()).then(function(records){
kintone.app.getHeaderMenuSpaceElement().innerHTML = '合計:' + records.reduce(function(previousValue, record){
return previousValue + Number(record.金額.value);
}, 0).toLocaleString();
});
});
})();

```

以下サイトを参考にしてます。

①以下方法だと，「済」がtrueの全アプリの合計になってしまいます  
[https://developer.cybozu.io/hc/ja/community/posts/360005372366-レコード一覧画面の集計で条件指定](https://community.cybozu.dev/hc/ja/community/posts/360005372366-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%AE%E9%9B%86%E8%A8%88%E3%81%A7%E6%9D%A1%E4%BB%B6%E6%8C%87%E5%AE%9A)

②以下方法で，さらに「済」をtrueにする抽出条件をどのように記述すればいいかがわかりません  
[https://developer.cybozu.io/hc/ja/community/posts/360050600491-一覧画面での合計値をヘッダーに出す方法](https://community.cybozu.dev/hc/ja/community/posts/360050600491-%E4%B8%80%E8%A6%A7%E7%94%BB%E9%9D%A2%E3%81%A7%E3%81%AE%E5%90%88%E8%A8%88%E5%80%A4%E3%82%92%E3%83%98%E3%83%83%E3%83%80%E3%83%BC%E3%81%AB%E5%87%BA%E3%81%99%E6%96%B9%E6%B3%95)

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1199](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@Legacy\_Account1199](https://community.cybozu.dev/u/Legacy_Account1199)\
**Post date:** [2020 年 6 月 8 日午後 9:58 UTC](https://community.cybozu.dev/t/topic/6428/2 "2020-06-08T21:58:59Z")

</div>

パット見2つの方法を思いつきました

&nbsp;

1. APIでデータ取得時に「済」の条件を追加する  
下記箇所に条件を追加すればよさそうにみえます  
query: ‘limit ’ + limit +’ offset ’ + tmpRecords.length

クエリの指定詳細については[こちら](https://community.cybozu.dev/hc/ja/articles/202331474-%E3%83%AC%E3%82%B3%E3%83%BC%E3%83%89%E3%81%AE%E5%8F%96%E5%BE%97-GET-#step2)

&nbsp;

1. 取得したあとの配列でFilterをかける  
下記合計値を求める箇所に[filter()](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)を追加すればよさそうです  
records.reduce…

例:

records.filter(function(record) {return record.チェックボックス.value === ‘済’}).reduce(省略

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account2215](https://avatars.discourse-cdn.com/v4/letter/l/9de0a6/32.png) [@Legacy\_Account2215](https://community.cybozu.dev/u/Legacy_Account2215)\
**Post date:** [2020 年 6 月 9 日午後 12:24 UTC](https://community.cybozu.dev/t/topic/6428/3 "2020-06-09T12:24:54Z")

</div>

\>[村濱一樹&nbsp;](https://community.cybozu.dev/hc/ja/profiles/385678104-%E6%9D%91%E6%BF%B1%E4%B8%80%E6%A8%B9)さま

ありがとうございます！

1.の書き換えを考えた挙句，できずに質問した次第でした。

2.を以下のように書き加えたらできました！

```
records.filter(function(record) {return record.チェックボックス.value == '済'}).reduce(省略

```

（イコールは2つだったみたいです）

本当に助かりました！ありがとうございます！！

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1199](https://avatars.discourse-cdn.com/v4/letter/l/ac8455/32.png) [@Legacy\_Account1199](https://community.cybozu.dev/u/Legacy_Account1199)\
**Post date:** [2020 年 6 月 9 日午後 1:29 UTC](https://community.cybozu.dev/t/topic/6428/4 "2020-06-09T13:29:43Z")

</div>

できたならよかったです！

イコールの数に関しては下記の記事などを参考にしてください。（基本的にイコール3つをオススメではあります）

[http://piyopiyocs.blog115.fc2.com/blog-entry-229.html](http://piyopiyocs.blog115.fc2.com/blog-entry-229.html)