json - Spring boot 和 Angular 中的 JSON 操作

Question

我正在使用 Spring Boot 并使用以下代码查询 MySQL 数据库

@GetMapping("/dashboard")
public String Date() {  
Connection conn = null;
List<Map<String, Object>> listOfDates = null;
try{
Class.forName("com.mysql.jdbc.Driver");
System.out.println("Connecting to database...To retrive DATE");
conn = DriverManager.getConnection(DB_URL,USER,PASS);

String countQuery= "SELECT migrations.mignum, migration_states.statemigrations.projectleader, migrations.productiondate," 
+ " migrations.installationtiers, migrations.targetplatform, migrations.apprelated, migrations.appversion FROM migrations, migration_states WHERE migrations.productiondate='2018-07-07"; 
QueryRunner queryRunner = new QueryRunner();
listOfDates = queryRunner.query(conn, countQuery, new MapListHandler());

conn.close();
}
catch (SQLException  se) {
se.printStackTrace();
}catch(Exception e){
//Handle errors for Class.forName
e.printStackTrace();
}finally {
DbUtils.closeQuietly(conn);
}
return new Gson().toJson(listOfDates);
}

这将返回一个像下面这样的 JSon 对象

[
{"state":"Approval in Staging","mignum":146384,"projectleader":"James Rice","productiondate":"Jul 7, 2018","installationtiers":"Linux Web WL10","targetplatform":"Production","apprelated":"Content Only","appversion":""},
{"state":"Approval by QA in Staging","mignum":146451,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"UPS Pickup Point Attribute Injector","appversion":"18.7.1"},
{"state":"Approval by QA in Staging","mignum":146453,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"UPS Pickup Point DB Web Services","appversion":"18.7.1"},
{"state":"Migration to Mahwah","mignum":146485,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Account Invoice Authorization","appversion":"18.07.01"},
{"state":"Migration to Mahwah","mignum":146487,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL10","targetplatform":"Production","apprelated":"My Choice Enrollment Component","appversion":"18.07.03"},
{"state":"Migration to Mahwah","mignum":146489,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"My Choice Enrollment WebApp","appversion":"18.07.01"},
{"state":"Migration to Mahwah","mignum":146492,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL81","targetplatform":"Production","apprelated":"LASSO","appversion":"UTA_18.07.03"},{"state":"Approval by QA in Staging","mignum":146495,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux Web WL10","targetplatform":"Production","apprelated":"LASSO","appversion":"18.07.03"},{"state":"Approval by QA in Staging","mignum":146496,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux Web WL10","targetplatform":"Production","apprelated":"LASSO","appversion":"18.07.03"},{"state":"Approval by QA in Staging","mignum":146497,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Precommissioning Authorization ","appversion":"18.07.09"},{"state":"Approval by QA in Staging","mignum":146498,"projectleader":"Keith Lucas","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Precommissioning Authorization ","appversion":"18.07.06"},{"state":"Approval by Dev Staging","mignum":146547,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Account Validation Component ","appversion":""},{"state":"Migration to Mahwah","mignum":146549,"projectleader":"Amardeep Grewal","productiondate":"Jul 7, 2018","installationtiers":"Linux Web WL10","targetplatform":"Production","apprelated":"URL Alias","appversion":""},{"state":"Approval by QA in Staging","mignum":146565,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Quantum View SubServer","appversion":"9.3.0"},
{"state":"Approval by Dev Staging","mignum":146566,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Web Email Preference App","appversion":"v3.8.19"},
{"state":"Approval by QA in Staging","mignum":146569,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"View Bill","appversion":"4.0.2"},
{"state":"Migration to Mahwah","mignum":146578,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Claims History Component","appversion":"NA"},
{"state":"Approval by QA in Staging","mignum":146579,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Address Search Component ","appversion":"2.1.0"},
{"state":"Approval by Dev Staging","mignum":146581,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"DCOWS","appversion":" 8.03.01"},
....
]

谁能告诉我，如何在 Spring 端或 Angular 端执行以下操作

1. 找到每个状态的计数，以便我得到 Json 数组，如下所示

   [ {"state":"Approval by Dev Staging", "count": 12}, {"state":"Approval by QA in Staging", "count": 12}, ... ]

2. 获取每个状态的数据，例如：

if state = "Approval by Dev Staging"
将其详细信息作为 json 对象显示在前端 Angular
if state = "Approval by QA in Staging"
将其详细信息作为 json 对象显示在前端 Angular 例如：

[{
"name":"Approval by QA in Staging",
"value":[
{"mignum":146547,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Account Validation Component ","appversion":"xxx"},
{"mignum":146547,"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Account Validation Component ","appversion":"xxx"},
....
}]
},
{
"name":"Migrations to Staging",
"value":[{
{"mignum":146547,
"projectleader":"Eric Lok","productiondate":"Jul 7, 2018","installationtiers":"Linux BEA WL12","targetplatform":"Production","apprelated":"Account Validation Component ","appversion":"xxx"} ....
}]

}]

.... ETC

标签： jsonspring-bootangular5

Answer 1

对于第二个问题，我可以使用dashboard.service.ts中的以下代码通过如下调用 在Angular方面实现它

    getDateDashboard() {
        return this._http.get(this.baseUrl + '/dashboard', this.options).pipe(map((response: Response) => response.json()));
     }

in *dashboard.component.ts*  by making a call to above service as follows  

        for (let index = 0; index < chartdataa.length; index++) {

                  if(chartdataa[index].state=="Approval by Dev. in Mahwah"){
                    this.displayDevMawah.data = chartdataa.filter(function(data:any){ return data.state == "Approval by Dev. in Mahwah";});

                    this.displayDevMawah.count = this.displayDevMawah.data.length;
                   console.log("this.displayDevMawah.count-->", this.displayDevMawah.count);

                  }

                  if(chartdataa[index].state=="Approval by Dev. in Windward"){
                    this.displayDevWindward.data = chartdataa.filter(function(data:any){ return data.state == "Approval by Dev. in Windward";});

                    this.displayDevWindward.count = this.displayDevWindward.data.length;
                   console.log("this.displayDevWindward.count-->", this.displayDevWindward.count);
    }
  ...   
}

现在我需要帮助从上面的结果中获取我的第一个问题
的 json 数据，即获取 json 数据和 Angular 端/ Spring 端中每个状态的状态和计数，如下所示

[
{"state":"Completed","count":240},
{"state":"Pending Approval by Development in Windward","count":2},
{"state":"Pending Approval by QA in Windward","count":1},
{"state":"Pending Migration to Mahwah","count":1},
{"state":"Pending Migration to Production","count":3},
...
]