フロントjavascriptでAPIからのresponseのJSONをうまく取得したい

前提・実現したいこと

csvを取り込んで一括登録できる管理画面を作ろうとしています。
そこで、apiから返されるjsonの内容をvue.jsでalert表示しようとしています。

例ですが、このような形でjson形式のresponseがかえってきます

json
1
2  "users": {
3    "inserted": 2,
4    "updated": 3,
5    "errors": []
6  },
7  "userGrooups": {
8    "inserted": 0,
9    "updated": 0,
10    "errors": [
11      {
12        "line": 2,
13        "column": "prefix",
14        "message": "グループ名は半角英数字（a-z, A-Z, 0-9）またはハイフン（-）・アンダースコア（_）で入力してください"
15      },
16      {
17        "line": 2,
18        "column": "description",
19        "message": "説明は必須入力です"
20      }
21    ]
22  }
23

users、userGroups、といった具合であと１０項目ほど一度にresponseきます

※実際に使っているapiのレスポンスとは中身変えてます

発生している問題・エラーメッセージ

response取得する際に、
jsonの中身で
users.inserted > 0 なら　登録件数を表示、
xxx.errors.length > 0 なら行数とエラーメッセージを表示

と言った具合で書こうとしたのですが、alert表示自体はできますがif文まみれになりソースがあまりきれいにならないです。
実現はできてますがもっと、スッキリ書く方法をアドバイスいただけませんでしょうか

javascript
1
2      /*実際に書いてみたソースコード*/
3
4      if (res.data.users.inserted > 0){
5        message += `ユーザー登録件数は ${res.data.users.inserted} 件` + `\n`;
6      } 
7      if (res.data.users.updated > 0){
8        message += `ユーザー更新件数は ${res.data.users.updated} 件` + `\n`;
9      }
10
11      if (res.data.userGroups.inserted > 0){
12        message += `ユーザーグループ登録件数は ${res.data.userGroups.inserted} 件` + `\n`;
13      } 
14      if (res.data.userGroups.updated > 0){
15        message += `ユーザーグループ更新件数は ${res.data.userGroups.updated} 件` + `\n`;
16      }
17
18      /*.etc... */
19
20      if (res.data.users.errors.length > 0){
21        message +=  `インポート失敗：ユーザー` + `\n`
22        for (const error of res.data.users.errors){
23          message += error.line + `行目：` + error.message + `\n`;
24        }
25      }
26
27      if (res.data.userGroups.errors.length > 0){
28        message +=  `インポート失敗：ユーザーグループ` + `\n`
29        for (const error of res.data.userGroups.errors){
30          message += error.line + `行目：` + error.message + `\n`;
31        }
32      }
33
34      /*.etc... */
35

どうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

出力フォーマットが基本的に一緒であれば以下のような感じ

//sample.json

json
1{  "users": {
2    "inserted": 2,
3    "updated": 3,
4    "errors": []
5  },
6  "userGroups": {
7    "inserted": 0,
8    "updated": 0,
9    "errors": [
10      {
11        "lineNumber": 2,
12        "column": "prefix",
13        "message": "グループ名は半角英数字（a-z, A-Z, 0-9）またはハイフン（-）・アンダースコア（_）で入力してください"
14      },
15      {
16        "lineNumber": 2,
17        "column": "description",
18        "message": "説明は必須入力です"
19      }
20    ]
21  }
22}

※ロジックがあっているかどうかはわかりません

javascript
1'use strict';
2fetch('sample.json').then(res=>res.json()).then(data=>{
3  let message="";
4  let tmp="";
5  const getMessage=(...arg)=>(tmp=arg[0])?`${arg[1]}${arg[2]}件数は ${tmp} 件\n`:"";
6  const getError=(...arg)=>arg[0].length?`インポート失敗：${arg[1]}\n`+arg[0].map(x=>`${x.lineNumber}行目：${x.message}`).join('\n'):"";
7  message+=getMessage(data.users.inserted,'ユーザー','登録');
8  message+=getMessage(data.users.updated,'ユーザー','更新');
9  message+=getMessage(data.userGroups.inserted,'ユーザーグループ','登録');
10  message+=getMessage(data.userGroups.updated ,'ユーザーグループ','更新');
11  message+=getError(data.users.errors,'ユーザー');
12  message+=getError(data.userGroups.errors,'ユーザーグループ');
13  console.log(message);
14});