Spring boot 和 Angular 中的 JSON 操作答案

【问题标题】：JSON manipulations in Spring boot & AngularSpring boot 和 Angular 中的 JSON 操作
【发布时间】：2018-07-02 15:07:11
【问题描述】：

我正在使用 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 端执行以下操作

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

[ {"state":"Approval by Dev Staging", "count": 12}, {"state":"由 QA 在暂存中批准", "count": 12}, ... ]
获取每个状态的数据例如：

如果 state = "开发阶段批准"
将其详细信息作为 json 对象显示在前端 Angular
if state = "在暂存中由 QA 批准"
将其详细信息作为 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"} ....
}]

}]

....等

【问题讨论】：

你从哪里得到 json 对象？它是通过一些http api来的，还是在文件中，还是在字符串中？数据库？
它将来自查询到 MYSQL "SELECT migrations.mignum, migration_states.state AS Current_State FROM migrations, migration_states WHERE ((migrations.productiondate=(SELECT valval FROM global_configs WHERE valname='erday') ))"

标签： json spring-boot angular5

【解决方案1】：

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

    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 数据，即
在 Angular 端/Spring 端获取具有状态和计数的 json 数据，如下所示

[
{"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},
...
]

【讨论】：

【解决方案2】：

public String url(@RequestBody String jsonData) {

        String messageId="0";       
        try {

            ObjectMapper objectMapper = new ObjectMapper();

        Message ms = new Message(); //write your class name that uses database entities

            Message message = objectMapper.readValue(jsonData, Message.class);


                if (message != null) {

                    String text= message.getMessage();

                    messageRepository.save(ms);//enter reposistory that use in controller

                    ms.getMessageId().toString();
                }


        } catch (Exception ex) {
            String errorMsg = ex.getMessage();
            if(errorMsg!="")
            return messageId + " donot save Error ";
        }
        return messageId;

    }

【讨论】：

只得到 json 对象 @GetMapping("/dashboard") public String Date() { Connection conn = null; List<Map<String, Object>> listOfDates = null; String countQuery= "SELECT migrations.mignum, migration_states.state FROM migrations, migration_states WHERE migrations.productiondate='2018-07-07"; QueryRunner queryRunner = new QueryRunner(); listOfDates = queryRunner.query(conn, countQuery, new MapListHandler()); conn.close(); return new Gson().toJson(listOfDates); } 想要 2 显示 1. 按每个状态计数 2. 获取 w.r.t 状态的所有数据
请正确格式化代码并描述 tge 代码在做什么。并检查if(errorMsg!="")
@Marged 为了清楚起见，我将代码添加到问题中
谢谢，这只是弹簧侧代码。在 angularJS 或 javascript 中，您可以使用循环调用它以进行多次插入。